デザインの記事一覧
lit - 軽量なレスポンシブWebフレームワーク
CSSフレームワークは大型なものになるほど便利な機能が追加されますが、その制約もまた大きくなります。Webデザイナーであれば、レスポンシブなどの機能だけあって、他は自由度が高いものを選びたいと思うのではないでしょうか。今回紹介するlitはわずか395byteしかないレスポンシブWebフレームワークになります。小さいだけ...
styled-icons - 13,500種を超えるアイコンフォント集
Webサイトを使いやすくしてくれるアイコンフォントは多数存在します。一つですべて済む場合もあれば、幾つも組み合わせたい場合もあるでしょう。足りない時に、都度追加していくのは面倒です。そこで使ってみたいのがstyled-iconsです。13,500種類以上のアイコンが使えるようになるライブラリです。## styled-i...
Paint By Wasm - 画像からカラーパレットを生成
デザインを行う際に、色数が多すぎるのはよくありません。数種類の絞り込まれたカラーパレットを作り、そこから選んで使うのが一般的でしょう。そのためカラーパレットを作るのが最も重要な作業になります。写真やイラストなどからカラーパレットを作る場合、便利そうなのがPaint By Wasmになります。## Paint By Wa...
Panache - Flutterのテーマエディタ
Flutterでは基本的なUIコンポーネントをあらかじめ提供しています。それらを組み合わせるだけでUIが作れるのは便利ですが、色がFlutterっぽさを感じさせるものなのが辛いところです。独自のカラーリングにしようと思うと、一つ一つ調整が必要になります。そこで使ってみたいのがPanacheです。Web上でFlutter...
MVP.css - 素のHTMLでもいい感じの表示に
いきなり大掛かりなサービスを作るのではなく、ミニマムなコンセプトが分かる小さなモデルを作ってみる、それがMVP（Minimum Viable Product）と呼ばれる考え方です。MVPで仮説検証を行い、確信してからサービス開発に入ると失敗が少なくなります。今回紹介するMVP.cssは、WebでMVPを作る時に使えるス...
Fluent UI - Microsoft社製のReact向けUIコンポーネント
HTML5で高度なWebアプリケーションの開発が行えるようになっています。そういったサービスを開発する場合、大事なのはUIです。従来のWebっぽさを残すと、ユーザビリティが低くなりがちです。なるべくネイティブ風なUI/UXを意識しましょう。もしWindows向けのサービスを開発しているならばFluent UIを使ってみ...
Blocks UI - JSXベースの画面をWeb上で設計
Webページを作るのは主にWebデザイナーの役割ですが、毎回依頼するのではお互い時間がかかってしまいます。運用担当者でも定型であれば画面を作りたいと思うでしょう。そして、それがReact製のWebサービスだったりすれば、デザイナーからエンジニアへと、さらに時間を要するかも知れません。そこで使ってみたいのがBlocks ...
OpenChakra - Chakra UI用のビジュアルエディタ
Chakra UIというのはReact向けに開発されているシンプルなUIコンポーネントです。Reactではコードの中にHTML構造が入り込んでいるので、デザイナーにとっては作業しづらいイメージがあります。そこで使ってみたいのがOpenChakraです。ドラッグ&ドロップでChakra UIを使ったデザインを行えます。#...
Hacker UI - 開発者向けのWeb UIフレームワーク
Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。## Hac...
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...