【day70】北海島プロジェクト #1日1サイトレビュー

北海島プロジェクト

【概要】
北海道中、北海道と世界が繋がっていく、オンラインコミュニティ「島プロ」の公式サイト

【選んだ理由】
イラストとカラフルな色使いが印象的。
色数が多くてもごちゃついていないのはどういう要素のおかげなのか分析！

【参考になるデザイン（PC）】
・ファーストビューはプロジェクトタイトルと北海道の魅力を表したイラストが一面に表示されている
→スクロールできることを伝えるために「SCROLL」が表示、下向きにラインも伸びるデザイン

▼PCサイズでは左側に配置されている「SCROLL」

・このイラスト内で、サイト内で使われている緑、ピンク、黄色、水色が用いられているので、統一感がある（ごちゃつかない）
・メニューアイコンは3連ドット→「×」に変化

▼3連ドット（上）から、背景色が反転した「×」マーク（下）に変化する

　

・メニューを開くと北海道のイラストを背景にして、各エリアリンクが袋文字で配置
→ホバーすると色が塗りつぶしになる
→Contactだけクリックするとメールソフトが起動するので、ノーマルなフォント

▼メニューを開いた画面。エリア名をホバーする袋文字が塗りつぶしになる

・背景は、linear-gradientを使ってグラデーションを多用している
→新しさ、フレッシュな印象がある
・エリア名は英字の大きいフォントで背景に配置されている
→エリアタイトルなどが重なって配置されている
・エリアは左右交互に配置されていて、背景色と背景英字によって境界を視覚化されている

▼境界部分のデザイン

・各エリアのイラストは、枠線からはみ出して配置されている
→自由、フレンドリー、身近な印象がある
・外部リンクに遷移する場合は目立つ楕円ボタン（ピンク背景）で配置されている
→このサイトで一番目立つ要素で、このサイトのゴール要素なんだとわかる！
・クラウドファンディングに参加された方の名前を記念碑のデザインで配置されていることがユニーク！

▼記念碑感がリアルなイラスト。土台部分の線も画像？

【ターゲット】
・北海島プロジェクトに興味がある人、企業
・北海道にゆかりがある人、企業

【サイトの目的】
・プロジェクトの概要を知ってもらう
・通常島民や企業島民になってもらう
・プロジェクトについて問い合わせをしてもらう

【フォント】
和文；M PLUS Rounded 1c（Google Fonts）
背景の英文：Poppins（Adobe Fonts、Google Fonts）

【カラー】
エリアタイトル：005C4B（濃い緑）
エリア サブタイトル009A7C（緑）
本文フォント：1f1f1f（黒）

ボタン：FF4879（蛍光ピンク）、005C4B

背景：
fff9e8（薄いクリーム色）、
8eeec2（ミントグリーン）→a2f1f2（ミントブルー）、
fff1b3（薄い黄色）→ fff267（黄色）
eedbfc（薄紫）→ feb9d3（紫っぽいピンク）
フッター背景：009a7c（深緑）

【レスポンシブ（SP）】
・横スクロールがなく、1カラムになるように配置されている
・ファーストビューはSPサイズでキュッと1画面でまとまった配置になっている

▼SPサイズのファーストビュー。イラストの配置が細かく調整されている

【感想まとめ】
北海道にゆかりがある人や企業がサークル仲間のように身近に繋がれるコミュニティを、イラストやカラーリングで温かくにぎやかに表現しているサイトだと思った。

▼PCサイズ キャプチャ