MENU CLOSE

【初心者・勉強中の方へ】実践!ホームページの作り方①
2018/07/20

こんにちは。 Mon Webの楠本です。

今回から現在ホームページ制作を勉強されている方や制作を始めたばかりの方に参考にしていただきたいと思い、自分がホームページ制作をどのようにしているかの手順を書いてみようと思います。

人それぞれやり方はあると思いますが、「このようなやり方をしているんだ。」など制作する上で参考にしてもらえたら幸いです。

実際に自分の制作実績にあるTOXIC GIRLS FILE2018(https://toxicgirlsfile.com/)を例にとって書いてみようと思います。

まずはカンプデータを作成

今回は、ペライチのページ制作という事でシンプルなデザインになっていおり、イラレで作ってます。


今回のデザインで気をつけたことは、アクセスしたらスクロールしないように要素を配置するという所です。情報量もそこまで多く無いこともあり、スクロールする必要性を感じなかったので今回のようなデザインにしてみました。

デザインをする時の横幅の大きさですが、自分はいつもPC版は1440px、スマホ版は320pxで作ることが多いです。(今回はスマホ版のカンプは作成せずに作っています)
PC版に関しての大きさはMacbook Pro 15inchの画面幅にしています。 今まで作ってきてこの大きさで作ると大画面になってもちょうど良い大きさになると感じたからです。(中の要素を1440pxでmax-widthで決めて、margin:autoみたいな感じの指定をしたりします)

スマホ版の大きさについては、iPhone5の大きさで作っています。
最近は、5を持っている人も少なくなってきたので少し画面幅を大きくしようか(7の375px)と考えています。 一応まだユーザーが多いと仮定してこの大きさにしています。

カンプを作る時の注意点

自分がカンプを作る時に気をつけていることは、 ・フォントサイズは出来るだけ整数の値で設定する。
・水平比率を変更しない。(フォントの長体とかは表現しにくいため)
・WEBフォントを出来るだけ使用して文字要素を作成する

などです。

デザイナーの方で時々やってしまうのが、PC版の要素を全選択して、shiftを押しながらの縮小をしてスマホ版に落とし込むという事です。
このやり方が良くないという事ではないのですが、実際〇〇.〇〇pxと表示された時に大きい方にするのか?小さい方にするのか?と判断しなくてはならなくなります。なので、予めフォントの拡大・縮小をした時には、一度大きさを確認するといいと思います。
自分の場合は、このような時には制作したデザイナーさんに確認をするようにしています。 お互いの意思の疎通がズレるのを防ぐためですね。

次の水平比率を変更しないも上記に通ずる所がありますが、デザインの時に良く使うカーニングの事です。
カーニングされた文字は、テキストのみで表現をするのにとても難しいです。表現できないとなると、その部分を画像に書き出して配置するしか方法がなくなってしまいます。

なぜ出来るだけ画像化を避けたいのかと言いますと、良くみなさんが耳にすると思います内部SEO対策です。
SEOの観点からだと文字は出来るだけ文字要素(hタグやpタグなど)で表現するのが望ましいとされています。 なので、出来るだけカーニングを避けたデザインを作った方が、後々にテキスト要素が増えていい材料になると思います。

最後のWEBフォントを出来るだけ使用するという所ですが、こちらも先ほど書いたSEO対策の為です。
先述したように、テキストで表現できないものは画像化すると行ったところからブラウザで使用できるフォントを選んでデザインするのがいいかなと思います。

自分が良く使うのは、Google Fonts(https://fonts.google.com/)で、ここでフォントの検索をしてホームページに組み込むことが多いです。
なので、場合によっては使っているフォントに類似したものを探して、再設定することもあります。 この場合はデザイナーさんと要相談になりますが…

また、日本語フォントも最近では読み込みの早いものが増えてきたので、検索してみると色々出てくると思います。

後工程の人思ってデザインをする

今回は、デザインカンプの作成について書いてみました。
自分が両方携わることがあるので、それぞれからの観点から書いてみましたが、どうでしたでしょうか?

制作をしていくとチーム分担制で作業を行うことも多くなってくると思います。 なので、お互いがお互いのことを知っていることが仕事を円滑に運ぶのではないかと思います。

次回はこのカンプデータからパーツの切り出しの部分を話したいと思います。

最後までありがとうございました。
もし役立った・面白かったと思われた方は是非ともTwitterのフォロー、facebookのいいねをお願いします!