デザインの記事一覧
Water.css - シンプルなWebサイトをちょっと良い感じに
HTMLは自由な表現が可能ですが、素のままでは本当に貧相な表示になります。かといって気の利いたデザインを作るのは大変です。一部の表現が足りないために、全体のバランスが崩れてしまうことも多々あります。そこで使ってみたいのがWater.cssです。読み込むだけで、Webサイトをそれっぽくしてくれます。## Water.cs...
Arwes - サイバーパンクな世界を再現するWebデザイン
開発者であれば、誰しもSFに興味を持つはず（個人の意見です）。近未来を舞台にした映画は数多くありますが、その多くで電気的な、かつ薄暗い世界が描かれています。粗暴な人たちがいたり、裏路地のような看板が並ぶ中、デバイスや乗り物だけは進化している世界です。そんな世界観にぴったりなWebデザインフレームワークがArwesになり...
splashy - 画像から色情報をピックアップ
デザインのカラーパレットを決める際に、別なものからインスピレーションを得たいと考えないでしょうか。格好良いロゴがあったなら、そこで使われている色情報をベースに、Webページを作れば雰囲気のよいものができあがりそうです。今回紹介するsplashyは画像を読み込み、そこからメインとおぼしき色情報を抽出するソフトウェアです。...
Made In India CSS - どんなサイトもインド風にしてくれるスタイルシート
先日、USA.css
Gradio - 機械学習用のUIを3分で作成
AI/機械学習の分野で研究が日々行われており、これまでには考えられなかったような製品や技術が出てきています。画像認識やゲーム、さらに動画を変換するようなことまで機械学習によって実現しています。今回紹介するGradioはそんな機械学習を体験できるUIを作成するためのライブラリです。## Gradioの使い方例えば写真にカ...
Perfect Edition - HTMLとePub対応の電子書籍テンプレート
電子書籍といえば標準のフォーマットがePubですが、もっと手軽に読みたい場合にはWebブラウザが使えます。コンテンツさえあれば、その見せ方は様々な形にすることができます。もちろん、読みやすい形式のためにはデザインなども考える必要があるでしょう。そこで使えるのがテンプレートです。今回はWebとePubに最適化されたPer...
Heroicons - 140種類のSVGアイコン集
アイコンセットはWebサイトの雰囲気やデザインによって最適なものを選ぶべきです。そのため、様々なアイコンセットを知っておけば、利用できる場面も増えるでしょう。今回紹介するHeroiconsはシンプルなアイコンセットになります。特徴としてはすべてSVGであることでしょう。## Heroiconsの使い方角丸で、柔らかい雰...
Hacker95 - Hacker News向けWindows 95風スキン
Hacker Newsは最新のテクノロジーに関するニュースが集まるのですが、そのUIはとても簡素で、レガシーです。コンテンツが大事なので、UIはこだわらなくてもいいですのが（ハッカーと付いていますし）、今同じようなUIでサービスが立ち上がったとしても決して使われなさそうです。そんなHacker Newsを昔懐かしいUI...
Placeholdifier - 既存のサイトをワイヤフレーム化
Webサイトのデザインを作る際には、テキストや画像を適当に塗りつぶした状態で作ります。あまり情報を多くすると余計なところが気になってしまうものです。これは既存のWebサイトを改善する際に、元のスクリーンショットを使うと問題になります。余計なログインアイコン、テキストなどに注目が集まってしまって、本来考えるべきデザインに...
Screenshot.Rocks - スクリーンショットを使ってWebブラウザのモックアップを作成
スクリーンショットをそのまま貼り付けるだけでは芸がありません。そこには余計な情報も入ってしまっているかも知れませんし、アイコンなどを消したいと思うこともあります。そんな時に使ってみたいのがScreenshot.Rocksです。Webブラウザのモックアップを使ったスクリーンショットを作成します。## Screenshot...
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フレームワークになります。小さいだけ...