この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。
完成したデザインをWebサイトとしてWebブラウザーに表示するためには、コーディングが必要になります。
コーディングを勉強中だったり、コーディング経験がまだあまり多くない方によくある悩みとして以下のようなものがあります。
- どこから作業を進めていけばいいのか分からない
- 同じようなスタイルを持ったclassが増えていってしまう
- スマホサイトのデザインが用意されていない時にどうすればいいのか分からない
この記事は、コーディングを任された時に「どこから手をつけていけばいいのか分からない、もっと効率の良い方法を知りたい」という方のヒントになればと思います。
どこから作業を進めていけばいいのか分からない
実際に完成したデザインを目の前にすると、どこから手をつけていいのか分からないことがあるかと思います。
そんな時に私が実際にしていた方法を紹介します。
印刷する
まずデザインを紙に印刷します。トップページでA4サイズ1枚、下層ページをそれぞれA4サイズ1枚というふうに印刷します。
ページごとにA4に収まるように縮小して印刷すると両サイドに書き込むスペースができるので、余程長いページ以外はA4サイズで印刷するのがおすすめです。
この時デザインの文字はきちんと読めなくても大丈夫です。
書き込む
この印刷したA4の紙に手書きで書き込んでいきます。
画面上でデザイン全体を1枚の画像にしてPDFに書き出して書き込む方法でも良いのですが、私の場合は、見るものが画面から紙に変わるだけで思考がリセットされる感じで進めやすかったので、紙に印刷して書き込む作業をしていました。
書き込む内容は次のようなものです。
- ヘッダー、メインコンテンツ、フッターの区切り
- セクションの区切り
- 見出しタグ
- divで囲む部分やliタグを使用する箇所
- コーディング時に使用するclass名
このようにあらかじめ使用するHTMLタグを書き込む作業をすると、「このタグだと文書構造的におかしい」など考えながら進めることができ、HTMLタグを入力していく時も紙を見ながら作業を進めることができるので、画面を行ったり来たりする回数も減ります。
同じようなスタイルを持ったclassが増えてしまう
コーディングの作業をデザインの上から（ヘッダーから）順に進めていくと同じようなスタイルを持ったclass名が増えてしまう場合があります。
このようなことを避けるためにはまず共通パーツを見つけ出すという作業が必要になります。
ここでも先ほどのデザインを印刷した紙が役に立ちます。
デザイン全体を見ると見出しやボタンなど共通のパーツを見つけることができます。
共通のパーツには同じclass名をつけます。
（class名については、BEMやFLOCSSなど使用する命名規則によって変わってくるためこの記事内では触れません）
この時にスタイルをどこまで共通パーツに入れ込むか重要になります。
共通パーツ内にmarginや文字の色を含むといろいろな場所で使いづらくなる場合もあるので、全てのページのデザインが既にある場合は共通パーツが出現している部分を見ながらどこまで共通パーツとしていくかを決めていきます。
共通パーツで全てのスタイルを持たせてしまうと、修正や追加があった場合に必要のないところまで影響が及んでしまいます。
また、タグに直接スタイルを持たせるのも修正や追加の作業がしづらくなり、指定したいスタイルが反映されない。ということが起きてしまいます。
スマホサイトのデザインが用意されていない時にどうすればいいのか分からない
最近はスマホサイトのデザインが用意されていない場合は減ってきましたが、今でも予算の関係やPCサイトがそれほど凝ったデザインではない場合に、スマホサイトのデザインが用意されていないことがあります。
このような場合には、まずブレイクポイントを何pxとするのか確認しましょう。
ブレイクポイントによってタブレットで表示する際にスマホサイトと同様に表示するのか、PCサイトと同様の表示にするのか、またはタブレット用のレイアウトを考えなければいけないのかとなるためです。
（ブレイクポイントとは、Webサイトの幅をデバイスによってWebブラウザーで表示する際の幅を切り替える部分のことです。）
スマホサイトのデザインがない場合には、以下の部分をどうするか考えます。
- ヘッダーのデザイン
- グローバルナビゲーションの表示
- 2カラムや3カラムのレイアウトとなっている部分
ヘッダーのデザイン
PCサイトのデザインでヘッダーにたくさんのパーツが配置されている場合があります。
この時に、スマホサイトではどのパーツを表示するのかを考えます。
スマホサイトでは幅が狭いので、多くのパーツを配置すると「タップできない」「小さくて見えない」ということが起きてしまいます。
ヘッダーに入りきらないパーツは、次のような配置が考えられます。
- ハンバーガーメニューをタップした時のみ展開される部分に配置する
- フッターに常時見えるように配置する
- スマホサイトでは表示しない
スマホサイトでは表示しないという選択肢ですが、PCサイトとスマホサイトで表示されている内容が違っているとサイトに訪問してきた人は「PCサイトにあったあの部分がスマホサイトで見つけられない」ということにもなるので、あまりお勧めできる選択肢ではありません。
グローバルナビゲーションの表示
スマホサイトのデザインでよく見るナビゲーションは、「ハンバーガーメニューをタップしたらグローバルナビゲーションが表示される」というものだと思います。このグローバルナビゲーションの表示の方法は、PCサイトのイメージから遠くなりすぎないようにします。
例）PCサイトでメインビジュアルの上にグローバルナビゲーションを配置したデザインの時、スマホサイトでもグローバルナビゲーションは上から降りてくるような表示にする。
などです。
PCサイトで2カラムのデザインであれば、スマホサイトではサイドバーから表示されるようにすると同じサイトとして自然な表示の方法となります。
2カラムや3カラムのレイアウトとなっている部分
PCサイズのデザインで2カラムや3カラムのレイアウトとなっている部分をどうするか考えます。
スマホサイトでPCサイト同様に3カラムとしてしまうと、画像は小さくて見づらくなったり、文章の改行が多くて読みづらくなったりしてしまいます。
そのため読みづらくならない配置を考える必要があります。
読みやすくするためという理由ですべてのコンテンツを1カラムで表示すると、画像のサイズによっては画面全体が画像で埋め尽くされてしまうということがあります。
この時、この画面を埋め尽くしてしまう画像が、文章のイメージ画像として無料素材サイトからダウンロードしてきた画像の場合、コンテンツとしての重要度は低いので、次のような表示方法が考えられます。
- スマホサイトではこの画像は表示しない
- 少しサイズを小さめで表示する
反対に、画像がその会社やお店で扱っている商品写真などであれば重要度が高いので、その場合は
- スマホで見た時にもわかりやすいようなサイズで表示する
ようにします。
このようにスマホサイトのデザインがなくても、見た目だけでパズルのように配置するだけでなく、コンテンツや画像の重要度も考えながら配置していきましょう。
コーディングはWebデザインをWebブラウザーで表示できるようにする作業ですが、見た目だけ整えれば良いわけではなく、その後の修正作業を想定したり、実際にWebサイトを訪問する人のことも考えて作業していくことが大切になります。
