フィンランド紹介サイトについて

世界幸福度NO.1 フィンランド

【追記】👆この卒業制作として作ったサイトは、転職活動時に使用するため、サーバー契約をずっとしていたのですが、無事転職活動も終えたので、契約を2020年7月28日で解約しました！(なのでクリックしていただいても今は見れません)
noteには動画を載せられないので、Twitterにサイトの全体を撮った動画を載せています。ここにも記録として残しておくので、もし良かったら見てください✨

#シーライクス の卒業制作として作ったサイトは、転職活動時に使用するため、サーバー契約していたのですが、7/28で解約しようと思ってます..

あと5日ほどですが、ここに記録として残させてください🌱詳細noteもこのツイートに吊るします

フィンランドの紹介サイトhttps://t.co/B9VqxzF3Zs#SHE卒

— Saki (@7saki35) July 23, 2020

概要
オンラインスクール「SHElikes」の卒業制作として制作した架空サイト「自然・体験・雑貨・暮らし」の4観点でフィンランドを紹介

URL 
http://worldhappiness.space/#
※"○○を詳しく見る"のボタンからつながる、ページは今回作成しておりません。ページトップにいく仕様となっています。

私は、フィンランドのファッションブランドであるマリメッコや、人々の暮らし、文化が昔から好きで憧れを持っています。

そのため、有名な観光地やイベント、雑貨など、オススメしたい観点が多くあるフィンランドの紹介サイトを制作しました。この紹介サイトをみて、フィンランドを好きになるきっかけになったらいいな、という想いを込めて制作しました。

ターゲット
・20~30代
・日々仕事で忙しい人
・ゆったりとした旅行を希望している人
・フィンランドが好きな人

制作期間
学び始めからサーバーアップまで約4ヶ月間
・2019.02月~03月の2ヶ月間
　→スクールでレッスンでサイトの作り方を受講しながら、
　　内容構成およびデスクトップviewのデザイン・コーディング
・2019.10月~12月の2ヶ月間
　→独学含め、
　　レスポンシブ化・サーバーアップ

使用ツール
・Photoshop/ HTML/ CSS/ jQuery

ーーーーーーーーーーーーーーーーーー

制作するにあたって、
気をつけたこと、工夫した点を3つのポイントでまとめました！

・「近接・整列・強弱・反復」の4つを意識してレイアウトしたことで、見やすくて内容が伝わりやすいデザインにした

・ゆったり感やフィンランドで有名なオーロラをイメージして、各画像の形を曲線にした

・案内リンクはテキストだけの表示ではなく、年齢や国籍を超えて直感的に内容をイメージできるようにアイコンを表示させた

・三本線のみのデザインだけではなく、ユーザビリティについても考え、「MENU」と「CLOSE」の文字表示にした

テキストの変化
・シンプルなデザインの中で縦書きにすることでアクセントとなり、CTAボタンへの視線誘導にも繋げた

・スマートフィンでも縦書きにしてしまうと可読性が低くなるため、横書きに変化させた
・デバイスごとの可読性を考慮しつつ、デザインに変化を持たせた

写真の見せ方
・写真を提示することでイメージがつきやすくなるため、複数枚の写真提示を設計

・スマートフォンで使用したスライダーでは、写真の形にも工夫し、横に流れるようなスライダーにしたことで、「ゆったり感とオーロラのイメージ」を出せるデザインにした

ハンバーガーメニューの設置
・グローバルナビゲーション内での表示していた案内リンクを、スマートフォンのデバイスではハンバーガーメニューで表示