1. CODE
  2. 架空サイト “炉漣旅館” 制作過程

架空サイト “炉漣旅館” 制作過程

みなさんこんにちは。棚です。

今日は、架空サイト”炉漣旅館“の制作過程について紹介したいと思います。

先日、私のtwitter(@c5hym)の方で下のようなツイートをしました。

 

一番多く票を集めたのが”炉漣旅館”でしたので、炉漣旅館をコーディングすることに決めました。

ネット上に公開しているので、是非一度ご覧になってからお読みください。
こちらから

それでは、これから炉漣旅館の制作過程をデザイン設計から順を追って説明していこうと思います。

 

1. デザイン

1.1サイト設計

まずは、サイトの構成やそのコンテンツ、どのようなデザインなのかなどを知るために、参考にしたいサイトを10個くらいみつけます。
今回の場合は、”旅館 ホームページ 綺麗“と検索して探しました。

・サイトの構成やコンテンツ
– メインビジュアル
– 概要
– 旅館の目玉
|— 露天風呂
|— 料理
|— 客室
– 宿泊プラン
– アクセス

・デザイン
– 画像多め
– フォントが特徴的
– テクスチャやパターン、飾り罫や飾り枠が良く使われている

こんな感じでまとめます。

1.2素材集め

ネット上に転がっている、ロイヤリティフリーの素材を集めます。

使えそうな素材を探していると、どんなデザインにするか何となく頭に浮かんできます。
“このパターンはヘッダーの背景に使えそう”とか、”このアイコンは各セクションごとのタイトルの疑似要素につけたいな”とか。

大体集まれば、次にデザインカンプを作成していきます。

1.3デザインカンプ作成

デザインカンプを作成するにあたり、私はPhotoshopを使います。
もともと使い慣れてたのもあってPhotoshopで作成していますが、Adobe XDとかが最近トレンドですね。自分も使えるようになりたい。。。

具体的な作成方法については、長くなるので端折ります。

ちなみに、私がPhotoshopでデザインカンプを作成する学習をするにあたり使用した教材はこちらです。


非常に丁寧に教えてくれるので、Photoshopをまったく使用したことがない人にもおすすめです。
また、WEBサイトを制作するうえでおすすめのツールやサイトなども随所随所で教えてくれます。

セールスマン(笑)のようになってしまいますが、私が購入した時は割引されて1000円くらいでした。
定期的に割引されてますので、購入を検討される方は割引されているときに買われた方が良いと思います。

2. コーディング

次にコーディングに入ります。

使用するエディターはAtomです。
そこは、Dreamweaverだろ!と思うかもしれませんが、少々動作が重い気がして最近は使用していません。

2.1 HTML

では最初に、HTMLから作成していきます。

雛形大きなブロック<header><section>など細かなブロック<nav><p>など
の順に、コーディングしていきます。

BEM風にクラス分けをして、なるべくすべての要素にクラスをつけます。
BEMについては、こちらのサイトが分かりやすく参考になりました。

また、共通部分には同じクラスを追加で付けます。
例えば、各セクションごとのタイトルや、marginなど。

雛形以外はすべて自前で記述しているのでHTMLだけで結構時間がかかるのですが、今後、Emmetとか使ってみたいなあと思ってます。

2.2 CSS

次にCSS。
一番大変だけど、一番楽しいところです。

まずは、reset.cssで各要素デフォルトで設定されているmarginやpaddingなどを無くし、自前のstyle.cssを適用します。

style.cssで上から順に、スタイルを適用していきます。

ここで、詰まったところとその解決策について紹介していきます。

(別記事で用意し、後で追加していきます)

jQueryで実装できるけど、CSSでも実装できるアニメーションに関してはCSSのみで実装します。
CSSで実装した方が、動作がより軽くなるからです。
例えば、animationプロパティだったりtransitionプロパティだったりを用いれば意外となんでもCSSで実装できちゃいます。
ただ、ブラウザによっては非対応のプロパティなどもありますので、そこは適宜使い分けましょう。

炉漣旅館の例でいえば、メインビジュアルのスライドなんかはCSSのみで実装しています。
(実装については、別記事で用意し後で追加していきます。)

PC表示用のスタイルが完成したら、レスポンシブ対応のスタイルを書く前に、一旦JavaScript/jQueryに移ります。

2.3 JavaScript/jQuery

JavaScriptやjQueryに関しては、プラグインが充実しているので自前で書いたりすることはほぼありません。
クラス付与や削除くらいはしますが(笑)

今回使用した、プラグインやライブラリは、

Wow.js
スクロールした瞬間に要素をフェードインさせたり、文字をバーッとフェードインさせるために使用しました。

Swiper.js
NEWSセクションの横スライドに使用しました。

2.4 レスポンシブ対応

ブレークポイントはBootStrapの仕様に合わせています。

具体的にどのように対応させたかをまとめます。
– 予約フォームをアコーディオンメニュー(スマホ・タブレット)
– 縦書き→横書き(スマホ・タブレット)
– グローバルメニューをハンバーガーメニュー(スマホ)
– 宿泊プランを2×2から1×4(スマホ)
– メインビジュアルを画面いっぱいに(スマホ)

2.5 ブラウザ毎の差異を無くす

少し辛い作業です。

コーディングする段階ではChromeで表示を確認しています。
しかし、かなりの確率でほかのブラウザ(Firefox, IE, Edgeなど)だと表示が崩れています。

特にIEなどはひどいですね。
今回は、IEは諦めてしまいました。すみません。

PCビュー、スマホビューでそれぞれ差異がある箇所を無くしていきます。

差異がなくなれば、完成です。

 

3. 完成

無事、完成しました!

二日間でコーディングすると宣言していたのですが、無事宣言通り二日間で完成しました。
デザインの過程を含めると、三日間かかりました。

制作物

今回は、制作物をGithubやGoogleDriveで公開します。

炉漣旅館
サーバー上にアップロードしました。

Github
コードなど、ファイル一式

Google Drive
デザインカンプ(PSDファイル)

 

また何作かデザインカンプを作り、その中からいくつかコーディングする予定です。

デザインやコーディングのお仕事など、いつでも受け付けています。
Twitter(@c5hym)メール(c5hym@yahoo.co.jp)にてご連絡ください。

4