カフェサイトの作成（schoo WEB-campus「Webデザイナールート」受講終了による）

WEBデザインのスキルアップのため、schooさんの「Webデザイナールート」を受講し、基礎的な技術を習得しました。

修了課題としてカフェのサイトを作成することとなっていましたので、サイトのワイヤーフレーム、デザインカンプ作成後、実際にコーディング作業を行い、レンタルサーバへの設置まですべて行いました。

実際の作成したページのURLは以下の通りです。
http://engaru-it.jp/shibucafe/

スマホに対応させるため、「レスポンシブWEBデザイン」を基本とし、上に戻るボタンやスライドショーなどをJQueryで実装し、問い合わせページはフリーのPHPソースを利用して対応しました。

参考URLに記載されているものが実際に作成したページです。

最後に利用したフリー素材は以下の通りです。基本的に商用可のものを利用しております。素材を作成してくださった方、誠に感謝致します。

【フォント】
●マメロン
http://moji-waku.com/mamelon/
●Berkshire Swash Font
https://fonts.google.com/specimen/Berkshire+Swash

【画像素材】
●背景の「ストーンタイルのパターンテクスチャ」
http://free-texture.net/seamless-pattern/stone-tile02.html
●メニュー両脇の飾り罫
http://free-line-design.com/?p=377
●コーヒーカップロゴ
http://unmatchedstyle.com/news/minicons-icon-pack-giveaway.php
●コーヒー豆アイコン
http://icon-rainbow.com/%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC%E8%B1%86%E3%81%AE%E7%84%A1%E6%96%99%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E7%B4%A0%E6%9D%90-3/
●ショップアイコン
http://icon-rainbow.com/%E5%BA%97%E8%88%97%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E7%B4%A0%E6%9D%90-1/
●店長画像
http://icon-rainbow.com/%E7%A4%BE%E4%BC%9A%E4%BA%BA%E3%81%AE%E7%94%B7%E6%80%A7%E3%81%AE%E7%84%A1%E6%96%99%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E7%B4%A0%E6%9D%90-1/
●問い合わせの飾り罫
http://frames-design.com/wp/?p=986

【プログラム】
●「about」ページのスライドショー
http://kenwheeler.github.io/slick/
●問い合わせPHP
http://www.php-factory.net/mail/01.php

カテゴリー

ランディングページ (LP) 制作

場所

北海道

最終更新日

2016年9月21日