模写コーディング『ひまわりパン』
![ひまわりパン](images/himawari-1.jpg)
サイト設計
個人制作/制作期間:2週間
- PDFの問い合わせページを参考に制作
- 問い合わせ以外のページを自身で追加
- レスポンシブ対応
![ひまわりパン](images/himawari-2.png)
コーディング
- 新着情報の追加
- こだわり内容を写真とキャプションで紹介
- slickを活用してスライドショーを追加
- ハンバーガーバーを設置
![ひまわりパン](images/item1.png)
制作について
初めて1つのページを完成させました。
自身では気づかないまま行間を詰めすぎていたり、後からレスポンシブ対応を追加したことで予想以上にコーディングに時間を費やしました。
事前にサイト設計をすることの大切さを学びました。
仮想サイト『J’ai faim!』
![french restaurant](images/restaurant-1.png)
サイト設計
グループ制作(3名)/制作期間:2週間
- 天神にオープンするカジュアルフレンチレストラン
- ターゲット層は天神で働く20代~40代女性
- ランチ集客にも繋がるページを制作
- 国旗をイメージした大人可愛い落ち着いたカラーをセレクト
![french restaurant](images/restaurant-2.jpg)
コーディング
- SF版は1カラム、PC版はファーストビューを意識して最大3カラムでデザイン
- メニューにフィルタリングを設置
- すぐにメニューへ飛べるように全ページにバナーを設置
![french restaurant](images/item2.png)
作成について
サイト設計やトップページに関しては、制作に慣れていない事もあり、全員で確認しながら作業を進めました。
そうすることで、一人では思い浮かばないデザインやコーディングの発想を取り入れながらページを完成させることができました。
同じレストランとの差別化を強く打ち出せなかった部分に関しては課題が残りました。
友人の料理教室『901cafe』
![おやつ教室](images/901cafe.jpg)
サイト設計
個人制作/制作期間:1週間
- アメーバオウンドによる制作
- テンプレートテーマのCSSカスタマイズ
- ロゴの作成
![おやつ教室](images/901cafe-1.jpg)
コーディング
- レイアウトの調整
- オーナーが編集できるページとHTMLページの振り分け
- ブログ機能を活用したメニュー詳細ページの作成
![おやつ教室](images/item3.png)
作成について
アメーバオウンドを活用したサイト作成が初めてだった為、YouTubeの解説動画や記事を参考に作成しました。
フォーマットがある上でのカスタマイズになるので、作業自体は短時間で進めることができましたが、実在する教室のサイト制作だったのでヒアリングを重視し、人柄や教室の雰囲気、ブログでは分かりづらいメニュー一覧、資格講座の説明ページなどを意識して制作しました。
PHPを理解してwordpressのカスタマイズにも挑戦したいです。
友人のネイルサロン『nicco』
![ネイルサロン](images/nicco-1.png)
サイト設計
個人制作/制作期間:3週間
- web予約やSNSの導線を分かりやすく設置
- オーナーの実績やメニュー内容を重視して制作
- オンライン、ショッピングサイトの案内
![ネイルサロン](images/nicco-2.jpg)
コーディング
- メニューはアコーディオンを設置
- fancybox、skickを使用
- OGP設定
![ネイルサロン](images/item4.png)
作成について
サロンページの制作経験や今まで習ったwebデザインの知識をフル活用して、一人でも多くの方に情報を分かりやすく届け、通ってみたいと思っていただける事を目標に制作を行いました。
予約への導線やオーナーさんの魅力がしっかりと伝えられるように意識してページを完成させました。