web制作初心者がデザインからのコーディング以外に習得しておくこと

はじめに

昨年11月に、異業種からweb制作業界に転職しました。転職前に独学でweb制作の学習をしており、そのときはデザインデータからのコーディングに時間をかけていました。ただ、実際に働き始めたことで、独学時には着手していなかった基本的なルールを知りました。独学のときに習得しておきたかったと反省しているため、現在独学中の方に向けて伝えたいと思います。

ターゲット

• 独学でweb制作の学習中の人
• 模写、デザインデータからのコーディングなどブラウザに反映される部分しか学習していない人

習得しておくこと

それでは、独学時に、習得しておいたほうがいいことを紹介していきます。

ギャラリーサイトを見る習慣

現在デザインの多くは、レスポンシブデザインが求められています。レスポンシブデザインとは、デスクトップ、タブレット、スマートフォンなどの異なるデバイスでウェブサイトを見た場合に、ウェブサイトのレイアウトが最適な表示であるデザインです。

コーディングの際に、受け取るデザインデータの種類はデスクトップ版とスマートフォン版の2つのケースが多いです。それ以外の部分（タブレット領域、大型モニターなど）については、コーディングの際に検討する必要があります。

その際に、良いデザインのストックがあれば、コーディングに活かすことができます。

ギャラリーサイトを見る際は目的を持って見る必要があります。目的はなんでもいいのですが、要素、テーマを絞って見ることで、作り方の違い、デザインの意図に気づくことができます。

例：

• 要素を絞る：ヘッダーのデザインに注目する、など。
• テーマを絞る：落ち着いた雰囲気のデザインを探す、など。

また、インタラクティブな要素に対するアニメーションについてもストックを持っておく必要があります。ここでいうインタラクティブな要素とはボタンやヘッター、フッターなどユーザーが要素に触れたときに、状態が変化する要素のことです。

多くのギャラリーサイトを見ることで、よく登場する　パターン、トレンドをストックしておくことで、自分がアニメーションを考えるときに活かすことができます。

マウスカーソルの記述

要素ごとにマウスカーソルの種類が変わることで、ユーザーはクリックやスクロール操作などの操作ができることを理解できます。
選択方法としては、クリックさせたい要素ならpointer、スクロールさせたい要素ならgrabといった感じです。

headタグの中身の記述

metaタグは、headタグの中に記載するタグのひとつで、検索エンジンやSNSなどに伝えたいサイトの情報を記載するために利用します。
記載することはサイトのタイトル、概要、画像、urlなどの情報になります。

metaタグを正しく設定することは、検索順位を上位に表示させることに寄与します。

設定しておくべき項目

• description
• ogp
• twitter
• favicon,apple-touch-icon

まとめ

以上が、独学時に戻ったら取り組んでおきたい習慣でした。