Webデザインの参考サイトを探しているなら、ぜひチェックしてほしいのが「Design Details」です。
世界中の優れたWebサイトを集めたギャラリーですが、単にスクリーンショットを並べているわけではありません。ページ全体のデザインから細かなUIパーツ、使用フォント、カラーコード、アニメーションまで確認でき、気に入ったデザインをじっくり研究できます。
無料で閲覧でき、アカウント登録も不要。Webデザインのインプット先として、ブックマークしておきたいサイトです。
Design Detailsは、Webサイトの細部まで研究できるデザインギャラリー
「Design Details」は、実在するWebサイトのデザインを収集・整理した海外のWebデザインギャラリーです。
掲載されているのは、企業のコーポレートサイトやサービスのランディングページ、クリエイティブスタジオのポートフォリオ、プロダクトの紹介サイトなど。編集者が選定したWebサイトが、業界やデザインの種類ごとに整理されています。
一般的なWebデザインギャラリーでは、トップページのスクリーンショットを見て、気になるサイトがあれば実物を開くという使い方が中心です。しかし、それだけではサイト全体の流れやスマートフォンでの見え方、スクロール時のアニメーションまで把握するのは難しいものです。
Design Detailsでは、各Webサイトのデザインをデスクトップとモバイルの両方で記録しています。ページ全体を確認するだけでなく、ヘッダーやヒーローエリア、フッターといった個別のパーツも閲覧できます。
さらに、使用フォントや配色、制作に使われたプラットフォームなどの情報も掲載されています。
「このサイト、いいな」と思ったところから、何がその印象を生み出しているのかまで掘り下げられるのが特徴です
Design Detailsでできること
1. 世界中のWebサイトをジャンル別に探せる
Design Detailsの「Websites」では、さまざまな業界のWebデザインをまとめて閲覧できます。
AI、金融、ヘルスケア、旅行、小売、エンターテインメント、クリエイティブなど、幅広いカテゴリが用意されています
特にデザイナーにおすすめしたいのが「Creative」カテゴリです。デザインスタジオやクリエイティブエージェンシー、ポートフォリオサイトなどが集められており、タイポグラフィを大胆に使ったサイトから、余白を生かしたミニマルなデザインまで見ることができます。
業界によってデザインの傾向が異なるのも面白いところです。
例えば、金融サービスでは信頼感や情報の整理が重視されやすい一方、クリエイティブスタジオではタイポグラフィや動きを使って独自の世界観を表現するケースが目立ちます。
普段担当していない業界のデザインを見ることで、いつもの制作では思いつかなかったアイデアに出会えるかもしれません。
2. ヘッダーやフッターなど、パーツ単位でデザインを比較できる
個人的に、Design Detailsで特に便利だと感じるのが「Sections」です。
Webサイトをページ単位ではなく、特定のパーツだけに絞って探すことができます。
例えば、以下のようなセクションが用意されています。
- Hero： ページ最上部のメインビジュアルやキャッチコピー
- Navbar： ナビゲーションメニュー
- Features： サービスや商品の特徴を説明するエリア
- Pricing： 料金プランや価格表
- Testimonials： 利用者の声や導入実績
- FAQ： よくある質問
- Footer： ページ下部のリンクや企業情報
Webデザインの仕事をしていると、「今回はフッターの見せ方を考えたい」「料金表のレイアウトだけ参考にしたい」といった場面があると思います。
そんなとき、ページ全体を何十サイトも見比べる必要がありません。目的のパーツに絞って、さまざまなデザインを比較できます。
特にヒーローエリアの一覧は見ごたえがあります。写真を全面に使ったもの、大きな文字だけで成立させたもの、プロダクトの画面を主役にしたものなど、表現方法はさまざまです。
同じ役割のパーツを並べてみると、デザインの違いがはっきり見えてきます。レイアウトの引き出しを増やすためにも役立ちそうです。
3. 使用フォントやカラーコードまで確認できる
気になるWebサイトを見つけたとき、「このフォントは何だろう」「背景色は何色だろう」と調べた経験はないでしょうか。
Design Detailsでは、掲載サイトの詳細ページにタイポグラフィや配色の情報がまとめられています。
タイポグラフィの項目では、見出しや本文などに使用されているフォント名を確認できます。
また、配色についても背景色やテキスト色、アクセントカラーなどがカラーコードとともに記載されています。
例えば、クリエイティブスタジオ「Parker Studio」の掲載ページでは、見出しに「PS Times」、本文に「Die Grotesk A」を使用していることが分かります。
カラー情報も掲載されており、背景の白、濃い文字色、淡いグリーンのアクセントカラーといった組み合わせを確認できます。
こうした情報があれば、見た目の印象だけでなく、具体的なフォントや色の組み合わせまで分析できます。
ただし、フォントやカラーの情報は収集時点のWebサイトをもとにしたものです。掲載後にデザインが変更されている場合もあるため、正確な仕様を確認したいときは元サイトも合わせてチェックするといいでしょう。
4. スクロールアニメーションや動きも確認できる
Webデザインは静止画だけでは判断できません。スクロールに合わせて文字や画像が現れる演出、ページ内の要素が切り替わる動きなど、実際に操作して初めて伝わる魅力もあります。
Design Detailsでは、一部の掲載サイトに動画が用意されており、スクロール時の動きやアニメーションを確認できます。元サイトを開いて操作する方法もありますが、動きが記録されていると、デザインの流れを繰り返し観察しやすくなります。
例えば、スクロールに合わせて情報が段階的に現れるページでは、どのタイミングで文字を読ませ、どのタイミングで画像を見せるのかが重要です。
静止画では印象的なレイアウトでも、動きを加えることで情報が伝わりやすくなる場合があります。反対に、アニメーションが多すぎて内容を追いにくくなることもあります。
見た目の派手さだけでなく、その動きが何のために使われているのかまで考えながら見ると、参考になる部分が増えそうです
なお、すべての掲載サイトに動画が用意されているわけではありません。
5. デザイン情報をMarkdownファイルでダウンロードできる
少し変わった機能として、デザイン情報をまとめたMarkdownファイルのダウンロードにも対応しています。
各Webサイトの詳細ページには「Download DESIGN.md」という項目があり、フォントやカラー、コンポーネント、レイアウトに関する情報をファイルとして保存できます。
Markdownは、見出しや箇条書きなどの文章構成を記号で表現できるテキスト形式です。人間が読みやすいだけでなく、AIを使った開発ツールにも渡しやすい特徴があります。
例えば、参考サイトを制作チームに共有するとき、スクリーンショットだけでは「どこを参考にしてほしいのか」が伝わらない場合があります。
そんなときに、フォントやカラー、レイアウトの情報をまとめたファイルがあれば、デザインの方向性を共有しやすくなります。
個別のセクションについても「SECTION.md」というファイルをダウンロードできます。
AIを使ったコーディングの参考資料として利用することも想定されており、単なるギャラリーにとどまらない機能です
ただし、これらはデザインの特徴を記録した資料であり、元サイトのソースコードやデザインデータそのものを取得できる機能ではありません。
気になるデザインを詳しく見てみよう
Design DetailsにはさまざまなWebサイトが掲載されていますが、具体的な事例を見ると、このサービスの便利さがよく分かります。
Parker Studio｜タイポグラフィとコラージュの組み合わせ
「Parker Studio」は、デザインスタジオのWebサイトです。
大きなセリフ体の文字に、紙のカードを思わせるパーツや画像を組み合わせたエディトリアルなデザインが特徴です。画面の一部に制作実績を配置し、スクロールに合わせて情報を見せていく構成にも工夫があります。
Design Detailsでは、使用フォントのほか、Next.jsやThree.jsといった技術情報、ページを構成する各セクションも確認できます。
グラフィックデザインの表現をWebに取り入れたいときに参考になりそうです。
Pp Frama｜書体そのものを主役にしたデザイン
フォントメーカーPangram Pangramの書体「Frama」を紹介するWebサイトも掲載されています。
大きなタイポグラフィと写真、鮮やかなカラーを組み合わせ、書体の形を印象的に見せるデザインです。
Design Detailsでは、使用書体の「PP Frama Variable Thin」「PP Frama Black」に加え、オレンジやブルーなどの配色も確認できます。
書体を紹介するサイトということもあり、文字そのものをビジュアルの主役にする方法を研究するのにぴったりです。
Arqé｜プロダクトを見せるランディングページ
動画テンプレートやアニメーション素材などを提供する「Arqé」のWebサイトも収録されています。
黒を基調にした背景に、白い文字とプロダクトのスクリーンショットを組み合わせたデザインです。このページでは、ヒーローエリア、料金表、利用者の声、FAQなど、複数のセクションを個別に確認できます。
特に面白いのが、ページ全体と個別のパーツを行き来できること。
例えば、ヒーローエリア単体で見れば文字の配置や画像とのバランスに注目できますが、ページ全体で見れば、その後どのように機能説明や料金案内へつなげているのかが分かります。
一つのWebサイトを、ビジュアルと情報の流れの両方から研究できる好例です。
Design DetailsをWeb制作で活用するなら？
せっかく多くのWebサイトが掲載されているので、気に入ったデザインを保存するだけで終わらせず、制作に取り入れる方法も考えてみたいところです。
制作前のリサーチに使う
まず試してほしいのが、案件に近い業界のサイトを複数比較する方法です。
例えば、クリエイティブスタジオのサイトを作るなら「Creative」、サービスのランディングページを作るなら近い業種のカテゴリから探してみます。
複数のサイトを見ると、ファーストビューで何を強調しているのか、実績をどの位置で見せているのか、問い合わせまでどのように誘導しているのかといった共通点が見えてきます。
参考サイトを一つだけ選んでしまうと、そのデザインに引っ張られやすくなります。できれば方向性の異なるサイトをいくつか見比べて、今回の案件に合う表現を考えるのがおすすめです。
レイアウトに迷ったとき、パーツ単位で調べる
制作途中でレイアウトに迷ったときにも役立ちます。
例えば、サービスの特徴を3つ並べるセクションが単調に感じられるなら、「Features」や「Feature Grid」を確認してみます。
同じように複数の情報を扱っていても、カードを横に並べるデザイン、画像とテキストを交互に配置するデザイン、大きな数字を使ってメリハリをつけるデザインなど、見せ方はさまざまです。
目的に合ったパーツだけを探せるので、漠然とギャラリーを眺めるより、必要なアイデアを見つけやすくなります。
デザインの言語化に使う
もう一つおすすめしたいのが、気に入ったデザインを言葉で説明する練習です。
例えば、「おしゃれなサイト」という感想だけでは、何を参考にしたいのか曖昧です。
そこで、フォントの太さ、文字間、背景色、余白、画像の配置、アニメーションのタイミングなどに注目してみます。
「大きなセリフ体と余白で上品な雰囲気を作っている」「背景を暗くして商品画像に視線を集めている」といった説明ができれば、参考にすべきポイントが明確になります。
Design Detailsには、個別のサイトが選ばれた理由や注目すべきポイントを説明したページもあります。自分の観察と照らし合わせながら読むと、デザインを見る目を養う助けになりそうです。
Design Detailsは無料？登録は必要？
Design Detailsは無料で利用できます。公式の案内によると、Webサイトのギャラリーを閲覧するためのアカウント登録も不要です。
気に入ったサイトを保存する「Saved」機能も用意されています。保存ページは「Saved on this device」と案内されているため、複数端末で共通のブックマークとして管理するサービスとは区別して考えた方がよさそうです。
また、「Weekly Picks」というメールマガジンも配信されています。
毎週選ばれたWebサイトや注目のセクションなどが紹介されており、過去の配信内容はWeb上で読むことができます。
日頃からデザインのインプットを続けたい人なら、週に一度、新しいサイトをまとめてチェックする使い方も良さそうです。
さらに、掲載してほしいWebサイトを提案する機能もあります。自分で見つけた優れたWebサイトを送信でき、編集者の審査を経て掲載される仕組みです。
利用するときに気をつけたいこと
Design Detailsは、Webサイトのデザインを研究するための参考資料です。
掲載されているWebサイトのデザインや画像、フォントなどを自由に再利用できるという意味ではありません。
特に、フォントには個別のライセンスがあり、画像やイラストにも著作権があります。気に入った素材を自分の制作物で使いたい場合は、それぞれの利用条件を確認する必要があります。
また、サイトに掲載されている技術情報やデザインの数値は、記録された時点のページをもとにしています。
Webサイトは公開後も更新されるため、現在のデザインや仕様と異なる場合があります。
海外のサービスなので、サイト内の説明は基本的に英語ですが、デザインの閲覧が中心であれば、英語が得意でなくても十分楽しめるでしょう。
まとめ｜Webデザインのインプット先に加えたいサイト
Webデザインの参考サイトは数多くありますが、Design Detailsは、見た目の美しさだけでなく、デザインを細部まで観察できるところが気に入りました。
特に、セクション単位での比較と、フォント・配色情報の確認は便利です。
参考サイトを探すとき、つい完成されたビジュアルばかり見てしまいがちですが、細かなパーツや情報の配置に注目すると、制作に取り入れられるアイデアはもっと増えると思います。
Webデザイナーはもちろん、タイポグラフィやレイアウトを研究したいグラフィックデザイナー、ポートフォリオサイトを制作したいクリエイターにもおすすめです。
気になるデザインを眺めるだけでも楽しいので、ぜひ一度チェックしてみてください。
