MEDESIGNCODELIFEGOODS気になるキーワード入力してください。制作過程みなさんこんにちは。今日は、架空サイト”炉漣旅館“の制作過程について紹介したいと思います。先日、私のtwitter(@c5hym)の方で下のようなツイートをしました。多く票を集めたのが”炉漣旅館”でしたので、炉漣旅館をコーディングすることに決めました。ネット上に公開しているので、是非一度ご覧になってからお読みください。こちらからそれでは、これから炉漣旅館の制作過程をデザイン設計から順を追って説明していこうと思います。デザイン1.1サイト設計まずは、サイトの構成やそのコンテンツ、どのようなデザインなのかなどを知るために、参考にしたいサイトを10個くらいみつけます。綺麗“と検索して探しました。テクスチャやパターン、飾り罫や飾り枠が良く使われているこんな感じでまとめます。1.2素材集めネット上に転がっている、ロイヤリティフリーの素材を集めます。使えそうな素材を探していると、どんなデザインにするか何となく頭に浮かんできます。“このパターンはヘッダーの背景に使えそう”とか、”このアイコンは各セクションごとのタイトルの疑似要素につけたいな”とか。大体集まれば、次にデザインカンプを作成していきます。1.3デザインカンプ作成デザインカンプを作成するにあたり、私はPhotoshopを使います。XDとかが最近トレンドですね。自分も使えるようになりたい。具体的な作成方法については、長くなるので端折ります。ちなみに、私がPhotoshopでデザインカンプを作成する学習をするにあたり使用した教材はこちらです。Udemyhttps://www.udemy.com/webdesign-photoshop/Webサイト制作における、Photoshopを使用したグラフィックを実践的に学びます。ワイヤーフレームの作成、合計3つの実践的なサイトを作成するなど、全100レッスンの充実した内容です。非常に丁寧に教えてくれるので、Photoshopをまったく使用したことがない人にもおすすめです。WEBサイトを制作するうえでおすすめのツールやサイトなども随所随所で教えてくれます。セールスマン(笑)のようになってしまいますが、私が購入した時は割引されて1000円くらいでした。定期的に割引されてますので、購入を検討される方は割引されているときに買われた方が良いと思います。コーディング次にコーディングに入ります。使用するエディターはAtomです。そこは、Dreamweaverだろ!と思うかもしれませんが、少々動作が重い気がして最近は使用していません。HTMLでは最初に、HTMLから作成していきます。細かなブロック<nav><p>などの順に、コーディングしていきます。BEM風にクラス分けをして、なるべくすべての要素にクラスをつけます。BEMについては、こちらのサイトが分かりやすく参考になりました。共通部分には同じクラスを追加で付けます。各セクションごとのタイトルや、marginなど。雛形以外はすべて自前で記述しているのでHTMLだけで結構時間がかかるのですが、今後、Emmetとか使ってみたいなあと思ってます。大変だけど、一番楽しいところです。reset.cssで各要素デフォルトで設定されているmarginやpaddingなどを無くし、自前のstyle.cssを適用します。style.cssで上から順に、スタイルを適用していきます。ここで、詰まったところとその解決策について紹介していきます。(別記事で用意し、後で追加していきます)jQueryで実装できるけど、CSSでも実装できるアニメーションに関してはCSSのみで実装します。CSSで実装した方が、動作がより軽くなるからです。animationプロパティだったりtransitionプロパティだったりを用いれば意外となんでもCSSで実装できちゃいます。ブラウザによっては非対応のプロパティなどもありますので、そこは適宜使い分けましょう。炉漣旅館の例でいえば、メインビジュアルのスライドなんかはCSSのみで実装しています。(実装については、別記事で用意し後で追加していきます。)PC表示用のスタイルが完成したら、レスポンシブ対応のスタイルを書く前に、一旦JavaScript/jQueryに移ります。JavaScript/jQueryJavaScriptやjQueryに関しては、プラグインが充実しているので自前で書いたりすることはほぼありません。・Wow.jsスクロールした瞬間に要素をフェードインさせたり、文字をバーッとフェードインさせるために使用しました。・Swiper.jsNEWSセクションの横スライドに使用しました。レスポンシブ対応ブレークポイントはBootStrapの仕様に合わせています。具体的にどのように対応させたかをまとめます。ブラウザ毎の差異を無くす少し辛い作業です。コーディングする段階ではChromeで表示を確認しています。Edgeなど)だと表示が崩れています。IEなどはひどいですね。今回は、IEは諦めてしまいました。PCビュー、スマホビューでそれぞれ差異がある箇所を無くしていきます。差異がなくなれば、完成です。無事、完成しました!二日間でコーディングすると宣言していたのですが、無事宣言通り二日間で完成しました。デザインの過程を含めると、三日間かかりました。今回は、制作物をGithubやGoogleDriveで公開します。・炉漣旅館サーバー上にアップロードしました。Driveデザインカンプ(PSDファイル)また何作かデザインカンプを作り、その中からいくつかコーディングする予定です。デザインやコーディングのお仕事など、いつでも受け付けています。Twitter(@c5hym)やメール(c5hym@yahoo.co.jp)にてご連絡ください。大学では海洋物理学を学んでいます。その傍らでフリーランスを目指し、昨年秋ごろから、独学でWEBデザインやプログラミング学習をしています。