デザインの記事一覧
Sorted CSS Colors - 関連する色合いを提案
デザインで色を選択する際、関連し合う色を選ぶことで全体のバランスを崩さずに済みます。しかし一つ一つの色を選んでいると時間がかかってしまうでしょう。ある程度自動的に選択してくれると便利です。今回はそんな関連した色を選択するのに便利なSorted CSS Colorsを紹介します。## Sorted CSS Colorsの...
CSS Windows 10 - Windows 10風のUIをCSSで再現
WebはもはやOSといっても過言ではありません。多くのアプリケーションが動作し、情報が保存されています。しかしOSとは雰囲気が異なるので、使い方も大きく違います。垣根を越えるためにはOS風のUIが必要です。そんな可能性が感じさせてくれるのがCSS Windows 10です。Windows 10風のUIをCSS/HTML...
placeholders - ダミー画像やテキストを生成するWeb Components
Webデザインを行っていて、画像の部分にプレイスホルダーとなるダミー画像を適用することがあります。大抵画像サイズだけが表示されていたり、目的（ロゴなど）の文字を書いていたりします。プレイスホルダー画像を提供するサービスもありますが、今回はローカルでも使えるプレイスホルダー画像を作るWeb Components、plac...
Penpot - Webベースのプロトタイプデザインツール
Webサイトや画像など、デザインする場面は多数あります。多くの場合、Illustratorなどで作成して、できあがったファイルをファイルサーバやクラウドストレージにアップロードして確認するでしょう。そんなフローを変えられそうなのがPenpotです。Web上でデザインして、そのままコメントやフィードバックできます。## ...
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の使い方角丸で、柔らかい雰...