旅きゅんーオリジナルサイト

スクールの最終課題で、オリジナルサイトとして作りました。

[製作期間]

３週間程度

[企画]

サイトの目的：情報発信

サイトのメインターゲット：インターネットから情報を収集する20～30代後半の女性。

サイトの印象：おしゃれで南国リゾート感のある印象、正確な情報が得やすいデザイン。

[ワイヤーフレーム]

構造は、既存の旅行メディアを参考にしました。

写真を豊富に使うことと、テーマや目的地別にカテゴリーをわけ、検索しやすいように工夫しました。  

[サイトマップ]

topページから、記事一覧ページ、記事詳細ページ、検索ページ、特集ページ、お問い合わせページにそれぞれ飛べるように設定しました。

全部で６ページしか現在はありませんが、実用する場合はWordpressを使ってページを管理していこうと考えています。（Wordpressは現在勉強中です。）

[デザインカンプ]

photoshopを用いて、配色、文字やボックスの大きさといった細かい部分を制作。

企画では、若年層の女性がターゲットでおしゃれで南国感あふれる印象に設定したため、明るめのオレンジをポイント色にし、アイコンの色は、砂浜を連想させるグラデーションにしました。

[コーディング]

工夫した部分は以下のとおりです。

・レスポンシブデザインにし、12カラム、横幅が960pxのスケルトンを使用しました。

ブレークポイントは551pxからPCサイズです。

・モバイルデザインのヘッダー部分にあるハンバーガーメニュー、メインの右側にあるカテゴリー、TOPに戻るボタンにJavaScript、JQUERYを使用しました。

SPバージョンハンバーガーメニュー

・TOPページのメインにスライダーツールであるowlcarouselを用いて、6枚の写真を自動表示させるように設定しました。