仮想サイトリニューアル

 https://koinoborifesta1000.jimdofree.com/
レイアウト崩れなどが見られる上記のサイトをリニューアルする想定。

【コンセプト・工夫した部分】
・ターゲットは小学生までの子どもがいる家族、近隣住民を想定。
・こどもの日、こいのぼりから連想し、メインカラーを空色、子どもの元気なイメージとして、アクセントカラーを黄色に設定。
・カジュアルすぎず、固すぎず、読みやすい「Rounded M」を採用。
・スマホレスポンシブ対応。
・画像はフリー素材に差替え。メインカラーと並べて違和感がないよう、画像補正を施した。
・ロゴをIllustratorでベクタデータにおこし、拡大しても荒れないようにした。
・ロゴのこいのぼりの形を小さな見出しやボタンにも使用。
・解像度が大きくても崩れないよう、曲線部分は横方向にシームレスな画像として繰り返し表示とした。

【所感・反省・課題】
・サイズ感が難しく、後からデザインカンプを修正した箇所がいくつかあった。数をこなして慣れていく必要がある。
・画像を背景に置いている箇所以外の部分がシンプルすぎるので、画面を賑やかにする引き出しを増やしたい。
・「今までやったことのない事を学ぶ」という裏テーマで、cssでのsvg画像操作を学んだ。保守性を考慮して、svgをcssで編集するか、別途画像を用意するか判断する必要があると感じた。
・今回はデザイン～コーディングをする事が目的であったため、元のサイトの情報をほぼそのまま使用したが、情報の取捨選択などもしっかりと行うような製作もしたい。
・PC(win)作業で問題なくてもiPhoneで確認すると画像がおかしくなっている箇所があったので、制作段階も実機でも確認する必要性を感じた。