CJ Column

コラム

Web制作の参考になる、おしゃれな北欧のWebデザインまとめ

みなさんは「北欧デザイン」と聞いて、何を思い浮かべますか?
カラフルな動植物の柄、かっこいいデザインの家具、などでしょうか。

私は「北欧デザイン」というと漠然と「ほっこりしたインテリア」「手書き風の動植物の柄」「なんとなくブルーグリーンが多い」みたいなイメージがありますが、現地のWebサイトにも「北欧デザイン」は用いられているのでしょうか。
北欧(スウェーデン、フィンランド、ノルウェー、デンマーク)の企業やプロダクトのWebサイトを集めて、デザインの傾向を探ってみたいと思います。

 

marimekko(フィンランド) https://www.marimekko.com/eu_en/

日本で有名な北欧ファブリックデザインといえばこれ。敷き詰められた大きな花柄がおなじみですね!
服にふんだんに柄が使われているためか、サイトの装飾は最低限です。ポイントで使われているパステルグリーンが優しい印象。

 

チボリ公園(デンマーク) https://www.tivoli.dk/da

デンマークの首都コペンハーゲンにある遊園地。
TOPだけ見ると、遊園地らしからぬ落ち着きのあるサイトのように感じますが、下層ページ(フードメニューやショーの案内など)はピンクの差し色も入って、女性的で可愛い印象です。そして、デザインフォント(この画像でいうと「175」の部分)がとってもおしゃれ。細かく柄が入っているのが北欧っぽい!
サイト全体にちりばめられているひし形モチーフの使い方も、いろいろなバリエーションがあって楽しいです。
女性をターゲットにしたサイトデザインの参考になりそうです。

 

IITTALA & ARABIA DESIGN CENTRE(フィンランド) http://www.designcentrehelsinki.com/en/

フィンランドの食器メーカー「イッタラ」のショップ&ミュージアムのサイト。
同じトーンのパステルカラーがたくさん使われており、黒でインパクトのあるフォントとのコントラストが目を引きます。
色と色との間に余白や区切り線などがないので、見る人によっては要素の境界が分かりづらいかもしれません。
ニュース部分の写真とテキストの重ね方はパーツデザインの参考にしたいですね。

 

ロイヤルコペンハーゲン(デンマーク) https://www.royalcopenhagen.com/home

デンマークの陶磁器メーカー。ブランドの特徴である「塗り」をあしらったデザインがかわいいです。
ボタンなどのパーツにはロゴと同じゴールドとネイビーがポイントで使われており、非常にシンプルなデザインでブランドの格式高さが感じられます。
見出しのセリフ体+本文テキストのゴシック体の合わせ技もおしゃれ!

 

visitnorway.com(ノルウェー) https://www.visitnorway.com/

ノルウェーへの外国人観光客向けのサイト。ファーストビューいっぱいに再生される動画がインパクト大。
デザインうんぬんより、「ノルウェーの大自然」というコンテンツの力が圧倒的です。
動画のメインビジュアルが当たり前になってきた今こそ、中身がより重要になってきたのではないかな?と、ノルウェーの風景を眺めながら感じました。

 

さいごに

いくつか北欧のサイトを調べてみて、気づいたことをまとめました。

・動植物モチーフなどの、いわゆる「北欧デザイン」とは逆に、意外と曲線が少なくソリッドな印象。
  影もあまり使わず平面的なデザインが多かったです。
・ファブリックデザインとの共通点は、フラットさとパステルカラー。
  とくにパステルカラーはいろいろなサイトで見かけたので、もしかしたらこれが北欧スピリットかもしれない(?)
・デザイン以外で特徴的だった点は、ほとんどのサイトで「クッキー取得に同意しますか?」という確認ダイアログが出たこと。
  日本で見るよりはるかに出会う頻度が高かったです。

A.U  フロントエンドエンジニア

一覧に戻る

お問合せ

以下のフォームにご入力の上、送信ボタンをクリックしてください。

企業名 企業名を入力してください
お名前 [必須] お名前を入力してください
メールアドレス [必須] メールアドレスを入力してください
電話番号 電話番号を入力してください
お問い合せ内容 [必須] お問い合わせ内容を入力してください

個人情報保護方針

個人情報の取り扱いについて

個人情報の取り扱いについて同意してください

ログインをすると、
会員限定記事を全文お読みいただけます。

パスワードを忘れた方へ

  • ログインIDを入力してください。
  • ログインIDを正しく入力してください。
  • パスワードを入力してください。
  • パスワードを正しく入力してください。
  • ログインID、パスワードが間違っています。


ログイン実行中

ログイン完了!ページを再読込します。