デザインの記事一覧
飛行機の離発着風HTML - 空港にある離発着案内風のUI
コロナ禍になかって旅行にも行きづらくなっています。特に飛行機に乗る機会が激減しました。飛行場の日常感、広い空間、ゲートの雰囲気など懐かしい人も多いのではないでしょうか。今回紹介する飛行機の離発着風HTMLは、そんな懐かしさを彷彿とさせるそんなソフトウェアです。## 飛行機の離発着風HTMLの使い方サンプルです。まさにあ...
Poulette - 自然な色の融合を作り出すカラーパレット
新しい色彩を考える時には、カラーパレットがよく使われます。多彩な色が並んでいる中、感性に合わせて色を選択するのですが、あまりにも多いと迷ってしまうでしょう。似通った色の中から、ほんの少し緑がかったもの、青っぽいものを選択したいなどニーズは色々とあるはずです。そんな時に使ってみて欲しいのがPouletteです。## Po...
ことばパレット - 単語からカラーパレットを生成
色を選ぶのは難しいですよね。何となく思いつくものの、具体的に色を選ぶのには時間がかかってしまうというのは良くあることです。何となくしっくりこなくて、いつまでも探し続けてしまうことだってあるでしょう。そこで使ってみたいのがことばパレットです。単語からカラーパレットを生成します。## ことばパレットの使い方例。朝焼けという...
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