Figmaでデザインされた有名なWebサイトの例。デザインシステムも。
Contents - 目次
FigmaでデザインされたWebサイト。
Figmaでデザインされたサイトの判断。
このサイトはFigmaでデザインしている？
現代ではさまざまなデザインツールが普及している。
そのため、Webサイトの見た目だけで、使用しているデザインツールを特定するのは難しい。
またFigmaには、WordPressやWix、STUDIO、Canvaなどのような、Webサイトのテンプレートも少ない。
それっぽいと感じるサイトがあったとしても、確信はできない。また、複数のツールを利用している場合もある。
といった制約の中で、下記のサイトは、Figmaでデザインされている可能性が高い例。
Figmaでデザインされたサイトの例1。
イギリスの例。
イギリス政府のサイト。
イギリス政府の公式サイトは、Figmaでデザインされている可能性が高い。
写真が使われていないという特徴があり、サービスと情報へのアクセスがしやすいように、メインビジュアル、ヒーローイメージのエリアに検索ボックスが配置されている。
ユーザービリティへの配慮。
ダークモードでも見やすいサイト設計となっている。
（ダークモードの拡張機能は、Dark Readerを利用。）
ダークモード表示。
デザインシステム。
デザインデータはFigma Community上へアップされている。
同じくダークモード（Dark Reader利用）でも見やすい。
ダークモード表示。
Figmaでデザインされたサイトの例2。
日本の例。
デジタル庁のサイト。
日本のデジタル庁も、Figmaでデザインされている可能性が高い。
シンプルな設計となっており、イギリス政府のように、あるいは参考にしたのだろうか、テキストのみで情報がまとめられているページが多い。
ダークモード表示。
イギリス政府のサイトやアメリカのホワイトハウスのサイトと比べた場合、ダークモードへの対応は改善の余地が見られる。
デザインシステム。
デザインシステムもFigma Community上にアップされており、無償で利用可能となっている。
Figma (@digitalagencyjp) | Figma
イラストレーション・アイコン素材。
イラストレーション・アイコン素材。
イラストレーション・アイコン素材もアップされており、誰でも利用可能となっている。
こちらはFigma上ではなく、ダウンロードして利用する形式。
Figmaでデザインされたサイトの例3。
アメリカの例。
Figmaのサイト。
アメリカのFigma（figma.com）のサイトは、当然Figmaでデザインされている可能性が高い。
Figmaの使用例がそのままデザイン化されており、遊び心が溢れたような印象もある。
日本語サイトも同じデザイン。
ダークモード表示。
Figmaを利用している企業？
Figmaのトップページに、下記の企業のロゴが掲載されている。おそらくWebサイトやアプリなど、何らかのUI/UXデザインでFigmaが利用されていると思われる。
日本の楽天のロゴも見られる。
- AirBnb
- Asana
- Atlassian
- Basic/Dept
- Braintree
- Coinbase
- Dribbble
- Dropbox
- GitHub
- Herman Miller
- Microsoft
- The New York Times
- One Medical
- Rakuten
- Slack
- Vodafone
- Walgreens
- Zoom
FigJamを利用しているブランド。
また、FigJamを利用しているブランドとして、下記企業のロゴが掲載されている。
- Puma
- Patagonia
- Stripe
- New York Times
- Netflix
- Spotify
- Notion
都市デザインとWebサイトデザイン。
美しく機能的な街並みと、美しく機能的なWebサイト。
急速な人口増加と近代化。
日本はいわゆる明治時代の文明開花、脱亜入欧の影響もあり、古来からの伝統的な街並みが消えていった。
また国土に対して人口増加が急速に進み、おそらくは都市デザインが間に合わないままに建築や街づくりがされていった。
この傾向はファッションも同様で、和食は日常でも和装は特別なものとなった。
また、現代のインターネット上のWebサイトにも見られる。
美しさと清潔さの違い。
現代日本の街は、たびたび綺麗で安全と言われている。
それ自体は好ましいことであり、日本の良さでもある。
その代わり、京都や奈良、白川郷などのごく一部に残された以外に、日本古来の美しさを持った街並みは無くなっている。
地震や津波が少なくかつ石造のヨーロッパの街並みと違い、地震や津波が多くかつ木造の日本の街並みは、耐久性が弱かったという理由もある。
現在日本の街並みは、美しいというよりも、清潔なのかもしれない。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
井川 宜久 / Norihisa Igawa
Figma 関連メモ。
使い方 & プラグインなど。
- Figmaで使える日本語フリーフォント一覧。商用利用も無料。
- Figmaでぼかしをかける方法。写真にぼかしを入れたいとき。
- Figmaのカラーパレットプラグインの使い方と、70:25:5の配色法則。
- Figmaの使い方が変わる？RGB入稿で印刷可能な時代に。
- Figmaでアウトライン化、フラット化をする方法と注意点。
- Figmaのツールバーやサイドバーが消えてしまったときの対応。
- Figmaのカーニング、文字詰めのショートカットの使い方。
- FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。
- FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。
- FigmaからWebPで書き出しす方法。Olive Pressの使い方
- Figma プラグインを削除する方法。追加も削除もシンプルに。
- Figmaがもし有料化されたら。Next Figmaのデザインツール。Pixso。
- Figma 削除したファイルを復元したいとき。復元の方法。
- Material SymbolsをFigmaへ。インストールしてすぐに使える。
- Figmaのルーラー（定規）の出し方。表示方法がイラレとちょっと違う！
- Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
- Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
- Figmaを日本語化。言語切り替えの使い方。再起動も不要。
- Figmaで検索・置換する方法。ショートカットからでOK。
- Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
- Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
- Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。
- Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
- Figmaがダークモードに対応。背景色設定も簡単、目に優しい！