渋谷でWEB制作とSES事業をやっている株式会社レベルスの中川です。
レベルスがどんな事やってるのか？はレベルスは何やってるの？を確認してみて下さい。ザックリとまとめてありますが、意外とわかりやすい！と好評。

そう！レベルスのメイン事業は「WEB制作」と「SES事業」です。いつもはエンジニアさんよりの記事が多いですが、今日はWEB制作会社らしく、少し技術的なお話をしていきますが、中級者以上の方はもうわかってるよという内容かもしれませんが、勉強始めたばかりの人やこれからCSSやHTMLを勉強する人、WEBサイトを作りたいなと思っている人には参考になるはず。

渋谷のWEB制作会社が教えるレスポンシブデザイン

そもそもレスポンシブデザインって何なのかという所をしっかりと理解をする必要があります。レスポンシブデザインとは、デバイス(PC・タブレット・iphone・Android)ごとに複数の異なる画面サイズを見やすくする為、そのデバイスの幅に応じて自動的に表示が最適にされる仕組みであり柔軟に調整していく事を指します。

レスポンシブデザインはこれからのWEB制作においては、絶対に覚えておかないといけません。
最近はレスポンシブでWEB制作をする事が当たり前になりつつあるので、今勉強中の人は絶対必須ですよ。

“コンテンツは水のごとしは、レスポンシブウェブデザインの原則を説明した格言”　-wikipediaより引用-

1.レスポンシブデザインのメリット

レスポンシブデザインを導入する事で得られるメリットという所もしっかりと理解しておきたい所。

【1】サイト管理・運用が楽

WEBサイトを作る際は管理や運用についても考えていかなければいけませんが、そもそもレスポンシブデザインはHTMLが１つなので、1つのHTMLファイルを変更するだけで更新やメンテナンスが可能になります。これがデバイスごとにHTMLがあるとその作業工数が取られる事になるので、管理・運用がしやすい事は大きなメリットです。

【2】SEOへの対策効果

Googleがレスポンシブデザインを推奨する理由
このページからも分かる様に、Googleでは明確にレスポンシブデザインを推奨しています。2015年の4月に実装したモバイルフレンドリー(スマートフォンでの閲覧に適していないといけない)や2018年3月に発表されたモバイルファーストインデックス(スマートフォンサイトが評価の基準になる)にもレスポンシブデザインでのサイト制作であれば、対応が可能になり、SEOへのプラスの効果が考えられます。WEB制作の過程でSEOは必ずぶち当たる問題ですから、プラスに働く事は覚えておきましょう。

※モバイルフレンドリーとモバイルファーストインデックスについてはまた別の機会に詳しく話をしていきたいと思ってます。

【3】URLが統一される

デバイスごとにHTMLを変えていると、それに合わせたURLが必要になりますが、レスポンシブデザインを採用しているとURLは1つでOKです。その為、SNSでの拡散やシェアがしやすい事もレスポンシブデザインを取り入れるメリットです。

【4】コンテンツの質が上がる

コンテンツの質が上がるというよりも、整理がしっかり出来る事が結果としてコンテンツの質の向上につながると言った方がいいかもしれません。デバイス毎に設計がバラバラでないが故に、コンテンツの精査が自然と出来て、ユーザーの求めるコンテンツを深堀していく事が可能になります。デバイスごとだとどうしても情報整理が煩雑になり、精査に工数を取られる事になり、結果としてコンテンツの質が高まりません。

2.レスポンシブデザインのデメリット

レスポンシブデザインは主流になってはいませんが、必ずしもやらなければいけない訳ではありませんが、目的に応じてした方がいい場合、しない方がいい場合もあります！そこはWEBサイトの目的に応じて決めていきましょう。

【1】制作工数がかかる

管理工数が減る代わりにデバイスごとに作りコーディングをする訳なので、制作時の工数はどうしても必要になります。ただ反面管理・運用の工数は減りますので、レスポンシブデザインを行う際はどうしても仕方がないと割り切る必要があります。

【2】スマートフォンの読み込みが遅くなる

HTMLは１つなので、PCと同じものを読み込ませるわけですから、どうしても時間がかかります。もちろん読み込まないものもある訳ですが、それでも読み込もうとするので、それだけ時間はかかってしまいますね。

【3】デザインが難しい

やはり何度も言うようにレスポンシブデザインはHTMLが１つなので、デバイスごとに細かな設定をしていくという事が難しいです。大きく見せ方に変化をつける事も出来ないですし、可能性として画像の解像度が異なるデバイスなどが出て規格が変わるとサイトの構築そのものを変更する事もあるかもしれません。(あくまで可能性ですが…)

3.レスポンシブデザインを作る時の注意点

レスポンシブデザインのWEBサイトを作る際には特に注意した方が良い所をまとめました。特にメリット先行で進めてしまって、デメリットに気づいた時には制作が進まなくなるなんてケースもありますから、十分注意していきましょう。

【1】初期設計が大事

よくあるケースが営業が取ってきて、ディレクターが大枠決めてきたけど…デザイナーやコーダーの所に降りてくる頃には、絶対無理やろ…となるケース。知り合いの会社さんでも炎上して、社内で揉めているなんて話もあるくらいです。レスポンシブデザインは制作に取り掛かる前の設計が本当に肝心要。ここにしっかりと時間をかけてデバイスごとの表示についてもしっかりと決めておきましょう。

【2】画像は小さくしよう

画像は多ければ多いほど、読み込むのに時間がかかるので、画像は出来うる限り小さくしましょう。CSSやWEBフォントを使ったり、CSSスプライトなんかで画像の表示が負担にならない様にしておくことが重要です。

【3】ブレイクポイントの設定

どの画面でも見やすいブレイクポイントをしっかりと設定する必要があります。ブレイクポイントがしっかり設定できていないと、表示がずれたり、文字がはみ出したりという事になってしまいます。以前は768pxを基準として設定する考え方が一般的ではありましたが、「iPhone X」とか「galaxy」なんかは解像度がちょっとおかしい(笑)ので、デバイス依存の768pxだとブレイクポイントを設定し直す必要も出てきます。

現在のレベルスのブレイクポイントのサンプル数値
スマホ縦　：480px
スマホ横　：600px
タブレット：960px
パソコン　：1280px

デザイン理論でも“8の倍数”が美しいという理論・観点に基づいて、全てが8の倍数になる様になっています。

【4】:hoverの取扱い

これは覚えておいて欲しいのですが、「:hover」はスマホにはない概念です。というより、本当に使いにくくなるだけなので、:hoverを指定するのはPC表示時の場合に限るとsassで設定をしましょう！CSSの:hoverがまだわからないよ！って人は基本なので勉強してみて下さいね。一つ一つ知識を蓄えていきましょう。

4.まとめ

今回はレスポンシブデザインについて、少しお話をさせて頂きましたが、猫も杓子もなんでもレスポンシブデザインにすればいい訳ではありません。そのサイトのクライアントの要望や希望、運用方針やユーザー層、扱う商材、サービスに応じて導入の可否を考える必要があります。ただWEBサイトを作っていく上で、レスポンシブデザインに全く対応できないでは困ってしまうので、スキルとしては身につけておいた方が案件の幅や出来る仕事が広がる事は間違いないと思います。

「WEB制作を仕事にしたい」とか「WEB制作を勉強している」人にとっては、今後絶対に必要なスキルなので、
勉強が進んだ段階でレスポンシブデザインにも挑戦をしてみるといいかもしれません。

最近こういった記事を書く際は開発のエンジニアの方だったり、それに興味がある方に向けて、pythonやrubyやjavaだったり、インフラ系の話を書く事が多かったのですが、元々株式会社レベルスは前身の会社から含めて、WEB開発、WEBサイトの構築、WEBマーケティング、SEO、広告などを長きにわたり手掛けています。現在はSES事業(システムエンジニアリングサービス)も行っていますが、本業と言われるとWEB制作・開発です。当然社内にはエンジニア・デザイナー・コーダーがおり、日々WEB領域の事業も手掛けています。

今日はHTMLとCSSのいわゆる“コーディング”と言われる部分をまだあまり経験がない人に向けて、最強最速の勉強方法を社内の敏腕コーダーに聞いてきましたので、現在勉強中の方は参考にして下さい。また社内の研修会のやり方も最後にまとめていますので、興味がある方はぜひレベルスまで！

WEBサイトのコーティングは他の開発言語とは少し異なり、HTMLやCSS、Javascriptを使って、デザイン通りになる様にコードを書いて、ブラウザで表示が可能な状態に整えていう事を差します。最近だと管理や構築がしやすいWordPressのCMSを導入する事も多いですし、コーディングの品質がSEOにも大きく影響を及ぼすため、WEBサイトの最重要項目とも言えるかもしれません。

コーディングスキルは模写で学べ

ある程度基礎的な勉強が終わっている方にオススメなのは「徹底的に模写」する事です。レベルスのコーダーも模写する事で大枠が掴めて、添削を繰り返す事でスキルや実務的な構成が理解できる様になったと言っています。また模写をする事で普遍的なコーディング、SEOに強いコーディングや流行りのつくりなど多くの物が見えてくると思います。

1.コーディング模写

【1】ソースコードは見ない

模写をソースコードを見て、まるまる作れば同じのが出来ますが、それでは全く意味ないです。ソースコードを使わずに知識を結集して、構成をイメージして作っていきましょう。

【2】時間を決めてやる

プロに近づくという名目ですから、当然プロには仕上がりのクオリティはもちろんですが、スピードも求められます。いくらいい仕上がりでも、想定以上の時間がかかってしまっては価値は半減してしまいます。お金は対価に対して支払われます。同じ時間で同じクオリティのものが倍できるのであれば、その価値は倍以上になります。プロとして活躍する事を目的とするならば、タイムマネージメントも頭に入れて、模写もやってみましょう。

【3】チェック作業を行う

もちろん終わった後はしっかりとチェックを行う事が大事です。このチェックをしっかりやらないと模写をした意味すらなくなってきます。「レスポンシブ対応はスムーズか」「タグに不備はないか」「構成はおかしくないか」「動きはおかしくないか」「JavaScriptやマースオーバーは問題ないか」確認すべき点は数多くあります。またここで詰まった所やわからなかったところは実際のソースコードを見て、直してみる事をおススメします！模範サイトを見たうえでわからない事を整理して、苦手部分を潰す事が大事です！！

最初の模写はテキストベースのものを選んで、徐々に慣れてきたから動きのあるサイトを選んで進めていけばいいと思います。スキルにあまりに見合わない模写はやる気をなくすだけです…。あとはサイトのバリエーションを意識して変えていく事で、コーディングの幅が広がってくると思いますから、最初のサイト選定も意識的に知識が広がる様にしてみましょう。

2.レベルスのコーディング勉強会

もちろんレベルスでもHTMLやCSS、JavaScript、JQueryを使ったフロント側の業務で活躍してくれているエンジニアの方がいます。SESで案件ごとに活躍をしてくれていますが、常に勉強をする姿勢は大事ですよと話していますから、社内のコーディングの経験豊富なスタッフが週に1度勉強会を開催しています。これも基本的にはコーディング模写を元にして、進めています。

毎週ごとに経験が浅いエンジニアで希望者には、コーディングの課題を持って帰ってもらっています。現在の業務もありますから、毎日少しずつ進めて、次の週に報告をして、添削しながら改善をしていきます。

【1】気づきで成長スピードを早める

どうしても自分が作ったものの評価は自分でするのと、他人がするのでは全く異なります。自分の作ったものはどうしても主観的になりがちなので、客観的な判断を勉強会に出ている全員で行っています。
その為に、1つ1つ丁寧に見ながら他人の作品や仕事を見る事で自分への気づきが必ず生まれますし、他の人との競争やより良いものを作ろうとする意欲が高まり、1人でやるよりも成長スピードを高め合えるという好循環につながっています。

【2】勉強の習慣をつける

まるで小学生に話す様な事かもしれませんが、エンジニアは一緒勉強の仕事。仕事の後に少しでも毎日課題に向かう習慣をエンジニア歴が浅いうちからつける事で、最終的には勉強する習慣が身に付き、勉強をする事が当たり前のマインドが生まれます。それが最終的にはエンジニアとして一線で活躍する大きな力となります。

【3】コミュニケーション能力を高める

WEB制作においては、クライアントの要望、システムサイドの考え方、ユーザーの使い勝手などあらゆる折衝をする場面が当たり前の様に出てきます。レベルスでは活発な議論や生産性があり熱量のある議論が出来る環境を作る為に勉強会を行っている側面もあり、自分の考えを伝える、そして相手の話もしっかり聞く。コミュニケーション能力の前提をしっかり身につけると事は最終的にエンジニア自身の価値を高めるものになると考えています。

3.まとめ

WEB制作においてはクライアントやユーザーが満足をする使い勝手がいい、UIやUXがしっかり作り込まれているなど、どこを向いてコーディングやデザインをしていくかが大事になります。フロントエンジニアを志す方にとっては、相手からヒアリングをしっかりする力、相手から話を聞き出す力も重要になります。それもあって、レベルスでは制作・議論をするという工程を加えて、技術以上のプラスオンを身に着けてもらえる様に研修や勉強会を工夫しているつもりです。自由闊達な雰囲気で毎回開催されてるので、興味がある人はレベルスに縁もゆかりもなくても、覗きに来てみてください！

またレベルスはHTML・CSS・JavaScriptを使ってWEBサイトを作る事が可能な方を随時募集しております。
エンジニアさんそれぞれの希望や要望に合わせて、最適なプロジェクトで活躍して頂ける様に心がけています。
今の会社の待遇に満足できない、仕事での成長スピードを高めたい、将来経営者になりたい、そんな方はぜひレベルスで活躍して下さい！