デザインの記事一覧
tailblocks - Tailwindをベースにしたブロックデザインパターン
CSSフレームワークとしてTailwindが知られています。画一的なデザインを提供するBootstrapなどと異なり、個別のスタイルのみを提供します。UI部品にする際には、それらのスタイルを組み合わせて自作する必要があります。より自由度が高く、作業を効率化してくれるフレームワークです。そんなTailwindを使ってブロ...
Color Copy Paste - リアルの物体から色情報を取得
任意の場所から色情報を取得してくれるカラーピッカーは便利な機能です。Webブラウザでも使っていますし、プレゼン作成ソフトウェアや画像編集ソフトウェアでもよく使います。今回紹介するColor Copy Pasteはそんなカラーピッカーソフトウェアなのですが、抽出する対象が異なります。それはリアルの物から色情報を取得するの...
new.css - HTMLタグのまま使えるCSSフレームワーク
デザインが苦手な人にとって、デザインテンプレートはとても便利な存在です。Bootstrap臭が、といわれても便利である以上使わざるを得ません。しかしクラスの使い方などを覚えるのは面倒です。今回紹介するnew.cssはHTMLタグのみ、クラス指定が不要（クラスレス）なCSSフレームワークになります。## new.cssの...
Dark Reader - 任意のWebサイトをダークモードで表示
ダークモードに対応したサイトが増えてきています。多くは自動的に設定されたり、設定画面を使って自分で切り替えるようになっています。しかし、まだまだ未対応のサイトが多いのも事実です。そこで使ってみたいのがDark Readerです。任意のWebサイトをダークモード対応にします。## Dark Readerの使い方MOONG...
Responsively App - レスポンシブWebデザインを効率化
レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。今回紹介するResponsively Appはそうした表示をまとめて行えるアプリになります。スクロールやイベントの追従もでき...
LaTeX.css - HTMLをLaTeX風に表示するCSS
LaTeXで文書を書いていて、HTMLに変換して欲しいというニーズはよくあります。そうしたHTMLはどことなくLaTeXっぽく感じられるでしょう。論文やレポートとしてはよくても、読み物としては読みづらい雰囲気があります。LaTeX.cssはその逆です。HTMLをLaTeXっぽく見せてくれるCSSになります。## LaT...
Twitterclone - Twitter風のUIデザイン
Twitter風のWebサイトを作ってみたいと思ったことはないでしょうか。プロフィール画面やタイムラインがあって、そこにフォロワーがいて…などTwitterの基本的なデザイン構成はそれほど部品が多くはありません。TwittercloneはそうしたTwitter風のデザインを模したソフトウェアになります。少しだけサーバサ...
GitHub Theme - GitHub Codespaces用のカラーテーマ
GitHubで新しいサービス、GitHub Codespacesが発表されました。GitHubのリポジトリから、Web上でVisual Studio Codeを立ち上げて、ファイルを編集できる機能です。そんなGitHub Codespacesで使われているテーマがGitHub Themeになります。Web上で合わせるこ...
XP.css - Windows XPを彷彿とさせるCSS
Windows XPは非常によくできたOSだったように思います。2000もよかったですが、XPの完成度は高く、安定していました。その後のVistaなどになってからは微妙で、今なおXPを使い続ける企業があるのも致し方ない気さえします。そんなXPらしいUIをWebブラウザでも再現したければXP.cssを使ってみましょう。#...
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サイト、スマートフォンアプリではテキストではなくアイコンで操作を指示することが増えています。絵の方が分かりやすい場面も多いですが、分かりづらいアイコン（保存のフロッピーアイコンなど）もあります。その中でも大事なのが統一性です。大量のアイコンが一つのパッケージになっていることで、統一されたデザインが実現できます...