デザインの記事一覧
EasyGrid - 外部依存のないグリッドライブラリ
コンテンツを綺麗に並べる際に必要なのがグリッドです。さらにレスポンシブに対応しようと思うとJavaScriptライブラリが欲しくなるでしょう。グリッドと一言でいっても奥が深い技術です。今回はそんなグリッドを手軽に導入できるEasyGridを紹介します。## EasyGridの使い方基本的な同じ高さのコンテンツを並べる例...
SPCSS - 素のHTMLでも素敵なデザインに
プログラマーにとって一つの鬼門とも言えるのがデザインです。新しいWebサービスを立ち上げようと思って粗く作ったものの、その後のデザインで頓挫してしまってやる気をなくすことは少なくありません。かといって最初からデザインをやると、いつまで経っても開発に入れなかったりします。そこで使ってみたいのがSPCSSです。素のHTML...
Plaiceholder - 画像をぼかしてプレイスホルダー化
Webサイトやアプリのデザインを考える際に使われるのがプレイスホルダーと呼ばれるモック的な画像です。単純にサイズを明記しただけのものもありますが、多少は情報があった方がそれっぽくなります。今回紹介するPlaiceholderは既存の画像をベースにプレイスホルダー化するライブラリです。## Plaiceholderの使い...
Builder.io - ブロックを組み合わせてWebページを作成
Webページを作る際に一からHTMLを作るのは大変です。開発者ですら大変なので、非開発者にとっては特に大変でしょう。Webサイトの運用は大抵開発者ではないので、運用担当者でも簡単にページを更新できる仕組みを作りましょう。今回紹介するBuilder.ioはWebページをドラッグ&ドロップで作成できるコンポーネントです。#...
Simorgh - BBCで利用されているSPAテンプレート
最近はSaaSやIT系企業に限らずオープンソース・ソフトウェアを提供するようになっています。異なるマーケットから出てくるオープンソースは、これまでとは違う分野の方たちに届く可能性があります。オープンソース・ソフトウェアの可用性を広げるためにも大切なことです。今回紹介するのはイギリスの国営放送であるBBCからリリースされ...
Svg Wave - 綺麗な波のデザインを描く
自然の動きを表現するのはとても難しいです。コンピュータは直線を描いたり、繰り返す動きを描くのは得意ですが、滑らかな曲線を自然に描くのは容易ではありません。しかし自然物のデザインはそうした繰り返しではないところに魅力があります。今回紹介するSvg WaveはSVGで波を描けるソフトウェアになります。## Svg Wave...
CSS Spider - CSS設定を素早く確認、編集
表示されているCSSの内容を確認する際には開発者ツールを利用するでしょう。しかし、情報が多すぎて分かりづらかったり、スタイルをコピーすると余計な情報もたくさん付いてきたりします。そこで使ってみたいのがCSS Spiderです。開発者ツールよりも使いやすく、分かりやすいスタイルチェッカーです。## CSS Spiderの...
Layoutit Grid - Web上でCSSグリッドをビジュアル的に設計
CSSグリッドはまだモダンなWebブラウザでしか使えませんが、それまでのテーブルで組むやり方や、Divタグで組むのに比べるとシンプルで分かりやすいのが利点です。その一方、使いこなすのが難しいイメージがあります。CSSだけで全体を想像しながら作るのは困難です。そこで使ってみたいのがLayoutit Gridです。Webブ...
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成
Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。今回紹介するWireflowはWeb上か簡単にワイヤーフロー...
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を使ってブロ...