design
![PCデザイン](image/Top-PC.png)
![タブレットデザイン](image/Top-Tab.png)
![スマホデザイン](image/Top-SP.png)
使用ツール:Adobe Photoshop / Adobe Xd
Favicon
![ファビコンの画像](image/favicon-Minori.png)
使用ツール:Adobe Illustrator
Coding
使用ツール:VS code
使用言語:HTML / Sass / jQuery
About
コンセプトである「実り」と自分らしさを意識してデザインしました。
メインカラーは稲穂の黄色とリンゴの赤を親しみを感じる柔らかいトーンに変更。
「実」の字の「誠、真心」という意味から誠実さをイメージする青を同じトーンでアクセントカラーに配置しました。
レイアウトはシンプルな図形の重なりを視線の流れに沿って配置。
今風の抜け感を意識して、透過したボックスを写真に重ねました。
今後増える可能性のあるコンテンツはカード化しています。
フォントはレイアウトに合わせ、幾何学的なデザインが特徴の「P22 FLW Exhibition」をサイトタイトルと見出しに採用。
その他の欧文フォントには、これも幾何学的であり可読性も高い「Futura PT」を。
日本語フォントには上記欧文フォントと相性が良く、可読性の高い「りょうゴシック PlusN」を使用しています。
HTMLでは、SEOを意識したセマンティックなコーディングを心がけました。
CSSは後から修正しやすいSassを使用。
アニメーション機能やjQueryを使用して動きを付けました。
レスポンシブはPC、タブレット、スマホサイズに対応。
お問い合わせフォームにはフリーCGIを使用。
自動でメールとして値を受け取ることができるようにしました。