デザインの記事一覧
React Spectrum - カラフルなテキスト用プレースホルダーを生成
Webやアプリのデザインを行う際に、アテで文字列を適用します。同じ文字を繰り返す、小説の一文を使うなど様々な方法がありますが、むしろテキストでない方がいいこともあるでしょう。そんな時に使ってみたいのがReact Spectrumです。カラフルなプレースホルダーを生成します。## React Spectrumの使い方生成...
CoreUI Icons - 1,500種類を超える多彩なアイコン集
今のWebサイト、スマートフォンアプリではテキストではなくアイコンで操作を指示することが増えています。絵の方が分かりやすい場面も多いですが、分かりづらいアイコン（保存のフロッピーアイコンなど）もあります。その中でも大事なのが統一性です。大量のアイコンが一つのパッケージになっていることで、統一されたデザインが実現できます...
FreeRule - シンプルな定規アプリ
画面上のウィンドウやオブジェクトのサイズを知りたい時、どう行っているでしょうか。スクリーンショットを撮って、画像編集ソフトウェアを使ってもいいですが、手間がかかります。サイズを測る機会の多い方に知って欲しいのがFreeRuleです。とてもシンプルにサイズが測れる定規ソフトウェアです。## FreeRuleの使い方こんな...
EscherSketch - タイル状のシンメトリーデザインを簡単に作成
あるパターンを繰り返すシンメトリーデザインは万華鏡などでよく知られています。折り紙を折って、ハサミで切ったりして遊んだ経験がある人も多いでしょう。繰り返すことで新しい魅力が引き出されるのは面白いです。今回紹介するEscherSketchはWeb上でシンメトリーデザインを描けるソフトウェアです。## EscherSket...
unDraw - 自由に使えるフラットなイラストをダウンロード
最近、海外のWebサイトを見ると、フラットな人やオブジェクトを使ったイラストがよく使われています。日本であればいらすとやと同レベルかというくらい使われています。そんな雰囲気のイラストがSVGで無償公開されています。それがunDrawです。## unDrawの使い方こういう雰囲気、見ますよね。!
アクセシビリティカラーヘルパー - Webアクセシビリティを考慮した色を提案
Webのアクセシビリティは大事な考え方です。誰もが使いやすいWebサイトを目指す上で、文字の大きさや背景色とのコントラスト、リーダー対応など様々な観点があります。今回紹介するアクセシビリティカラーヘルパーは背景と文字のコントラスト比を維持するためのカラーパレットになります。## アクセシビリティカラーヘルパーの使い方利...
Responsive Viewer - レスポンシブWebデザインをまとめて確認
レスポンシブなWebデザインが当たり前になっており、その表示確認が大変になっています。Webブラウザの幅を変えたり、スマートフォンやタブレットでの表示を確認したりしている方は多いでしょう。そうした手間を減らせそうなのがResponsive Viewerです。一気に複数デバイスでの表示を確認できます。## Respons...
PureCSS Lace - CSSだけで絵画のような表現を実現
CSS3を活用すれば高い表現力が実現できます。イラストを描いたりすることだってできます。まるでドローであったり、SVGのような使い方が可能です。もちろん厳密な計算が必要です。そんなCSS3の作品例としてPureCSS Laceを紹介します。まるで絵画のようなCSS作品です。## PureCSS Laceの使い方こちらが...
System Font CSS - OSネイティブのフォントを利用するCSS設定
CSSでOS標準のフォントを使いたいときには `system-ui` という指定を行います。ただし古いWebブラウザで使えなかったり、解釈においてまだ課題があるようです。各OSともフォントにはこだわりを持っているはずで、その標準フォントはOSにマッチして表示されるはずです。そこで使ってみたいのがSystem Font ...
Mobile First Animation in React - React製のスマートフォンアプリ風UXコンポーネント
Webがどんどんネイティブアプリに近い体験を提供できるようになっています。WebブラウザのAPIもそうですが、アニメーションの高速化によって、スマートフォンアプリのようなUXも実現できます。今回紹介するMobile First Animation in ReactはモバイルWeb向けにアニメーションを提供するReact...
ReportBro - Web上で帳票をデザイン
レポートは生成するのも大変で、さらにそのデザインを行うのも大変です。デザインをコーディングしてしまうと、ちょっとした修正でも手間になります。その結果、専用のツールやExcelでテンプレートを作れるようにするでしょう。今回はWebブラウザ上でレポートのテンプレートが作れるReportBroを紹介します。## Report...
darkmodejs - ライト/ダークモードをWebブラウザでも認識
最近のOSではダークモードが導入されています。時間によって変わることもできれば、単に暗めのUIが好きという人も選択できます。開発者であればダークモードを好む人も多いでしょう。そんな中、ダークモードなのにWebサイトが明るいままだと興ざめです。解決してくれるライブラリとしてdarkmodejsを紹介します。## dark...
Dark Mode Toggle - ダークモード切り替え用Webコンポーネント
macOSから始まったダークモードは一気に広がっています。デスクトップはもちろん、Webサイトにおいてもダークモードの需要が高まっています。しかし、単純に暗いCSSを用意すれば良いだけではありません。ユーザにとって使いやすいダークモードを提供するために使ってみたいのがDark Mode Toggleです。Googleが...
pastel - CUIで色を自在に生成
色との出会いは一期一会です。コンピュータ上で無数に表現できる色と偶然出会える可能性はごくごく僅かです。むしろ偶然生み出された色がとても魅力的だったというケースも多いでしょう。今回紹介するpastelはターミナル上で色を生成したり、情報を取得できるパレットのようなソフトウェアです。## pastelの使い方色名を指定して...
Universal Résumé Template - 多彩なデバイスに対応したレジュメテンプレート
日本であれば履歴書のフォーマットが一つの形に決まっていますが、多くの国ではそういったものはありません。特定の紙のフォーマットではなく、見やすく自分の経歴や経験を記述するのが肝要になります。今回紹介するUniversal Résumé Templateはとある開発者の履歴書（レジュメ）であり、テンプレートとして再利用でき...
laptop CSS - ラップトップ風の枠を表示するCSS
同じ映像であっても、その見せ方によって受ける印象は大きく異なります。レトロな映像を、同じくレトロなテレビの枠に当てはめて再生すると雰囲気が出ます。人は単純に映像だけでなく、その周辺環境の影響も受けて楽しむことができます。今回紹介するlaptop CSSはそんな映像を表示する枠のようなものです。何がマッチするのか考えさせ...
Windows 95 UI Kit - Windows 95風のWebサイトを作る際に
懐古主義という言葉があります。過去の出来事は美化される傾向にあり、当時味わったはずの嫌な思い出は忘却の彼方へ飛んでいってしまいます。その結果、古き良きなんて言葉が出てきます。今回紹介するWindows 95 UI Kitはその名の通り、Windows 95風のUIをWebブラウザ上に再現できるCSSデザインです。## ...
pagemap - Webページにミニマップを追加
長大なコンテンツがある時、自分が今どの位置にあるのか知りたくなります。書籍であればページ数が書かれており、Webサイトであればページネーションを分けたりします。自分の現在位置が分かることで、後どれくらいのコンテンツが残されているか把握できるようになります。そんなミニマップをWebサイトに追加してくれるのがpagemap...
Pakyow - デザインファーストなフレームワーク
Webフレームワークというとプログラマ向けのものが殆どです。プログラマにとって使いやすくともデザイナーにとって使いやすいとは限らず、なかなか普及しないケースもあります。そこで注目したいのがPakyowです。デザインファーストなWebフレームワークです。## Pakyowの使い方例えばこんな感じでコンテンツを作ります。と...
Darkmode.js - Webサイトにダークモードを手軽に導入
macOSでダークモードが導入されて以降、一気にその波が広がっています。アプリなどもダークモードをサポートしたり、Webサイトでも行われるようになっています。プログラマやエンジニアでは背景を黒くするのが当たり前だったので、時代が追いついたと言えなくもなさそうです。そんなダークモードをWebサイトでも使えるようにするのが...