先日、学校の課題でWebサイトのカンプとコーディングをしました。

 

実際に作ったカンプとサイトはこちら:

 

Webサイトは「健康堂」という店舗名で、内容は自由に作って良いとのことだったので、自分はとりあえず「健康食品」を扱っているサイトをイメージしました。

健康食品系はあまり関心がないもので、実際どんなサイトが多いのかなぁと調べてみたところ、一番多かったのはメインカラーが緑色のサイトでした。
青汁や植物の色を自然と連想するからですかね。他にはオレンジや爽やかな青色系が多かった印象です。

 

今回はあえて、緑色以外を使いたい気持ちがあり、メインカラーを渋めの色(玄米や小豆の色をイメージ)にして、タイトルや広告の野菜の色を際立たせるようにしてみました。

 

サイト外観

…広告の色ももう少し統一すればよかったな。

 

広告については、自分で書いたイラストや写真ACのフリー素材を組み合わせて作ったものを使い、CSSアニメーションで左右にスクロールさせてみました。
こちら(↓)なんか地元のお米の広告っぽくしてますが、背景に使ってるのはバリ島の田んぼの風景だったりします(笑)

お米の手作り広告

ちなみにカンプとサイト制作にかかった時間ですが、大まか計算で最低でも50hはかかったと思います・・・。

 

時間がかかった理由
・カンプの文字が大きすぎることに気づき、コーディングの段階で気づいて作り直すはめになった
一般的なサイトのフォントサイズなどを考慮してカンプを作るべきでした(一番小さい文字でも36ptにしてた;)
・Photoshopと仲良くできなかった
Illustratorの操作は直感的で個人的に好きなのですが、Photoshopは選択操作が煩わしい~~

次からカンプはイラレで作ろうと思います…。

・キーフレームアニメーション(詳細は後日記事を書きます)の理解に時間がかかった
・家のPCが重い

 

 

さて、こうして作った初めてのサイトですが、いくつか指摘を頂きました。
(※なお、上記URLのサイトは、すでに以下指摘を反映したものです)

 

 

 

◆カンプ・コードの指摘

本文ゴシック体にした方がよい(長文を読むのに読みやすいため)

・ホバー時のボタンの色が背景色と同化しているため、色合いを変えること

ボタンホバー時の画像

 

・スマホでみたときにグローバルナビゲーションが画面外にはみだしている

スマホで表示したときの画面

 

・タイトルの「健康堂」が標準フォントでスタイリッシュさを感じない。全体的におしゃれなデザインにしているなら文字をロゴっぽく工夫するか、Googleフォントを使ってほしい

 

レスポンシブについては完璧に対応したつもりだったので、スマホ画面から確認したときはレイアウト崩れが眩しかったです。次回はこれらを修正していきたいと思います。

最後までお読み下さりありがとうございました!