コーディングの練習

2、ヒーローイメージ(ファーストビュー)を意識したコーディング

第二弾、ファーストビュー(ヒーローイメージ)は超大事

2回目のコーディングです、まずはデータをダウンロードしてコーディングしてください。

デザインカンプに指示が書き込んでありますのでそれに従ってください。

実務ではコーディングに関して直接指示があったりデザインカンプに指示が書き込んであったりします。


コーディングの練習(2回目) (18 ダウンロード)

 

コーディングに関しての解説

(多分)少し難易度が上がったと感じたと思います、「そんなことない、難しかった」とおもったらすいません。

今回もポイントがあります、毎回のコーディングにポイントがありますのでばっちりできるようになればそのまま実務に対応できるし多少違っても対応させることはできます。

私が実務をしている会社の人が言ってましたが面接に来た人の実力的にそんなに違いがないそうです。

だから面接に実務に通用しそうな人が来たら他の人と印象が変わりますよね?

そして採用の可能性が上がります。

独学で勉強しいる人はまずデザイン的なコーディングを知りませんから(私も知りませんでした)。

またコーディングに関して解説するサイトも(私が知る限りでは)ないですから(あったとしても有料で中身が浅い可能性があります)。

だからこのサイトでしっかり勉強して他の人と差を付けましょう!

ちなみに人と差別化をしないと受かりにくいのですが私は他の人と少し違うこともできてそれが採用の要因にもなっているはずです。

それに関してはおいおい話を出していきます。

では解説です。

 

またハンバーガーメニューがないけど、、

1回目のLPでハンバーガーメニューは重要ではないから付けてないと説明しました。

私が実務をするまではハンバーガーメニューはどのページにもあると思っていましたがそうでもないです。

私が働いている会社のLPにはほとんどハンバーガーメニューはないです。

今回のデザインカンプを作るのに↓のサイトを参考にしましたがハンバーガーメニューは付いてないです。

https://kamedaseika-action.jp/eco/

だから私が解説するコーディング用のデザインカンプですがハンバーガーメニューが登場したりしなかったりします。

 

ファーストビュー(ヒーローイメージ)は画面いっぱいに広げる

今回のデザインカンプですが一番上に画像がありますよね?

この画像です。

 

これをヒーローイメージ(私が実務をしている会社はファーストビューと呼んでいました)と言いますがどんなLPなのかを連想する画像です。

ヒーローイメージでLPの内容の印象が変わるので超重要な内容です。

1回目のコーディングの解説で「青線の枠内に全ておさめましょう」と解説しました。

左右の青線の中に全て納めましょうと説明しました

 

ヒーローイメージに関しては主役なので目立たせるためスマホ画面では青線の枠内に納めません、だから画面いっぱいに広げましょう。

そして縦の長さですがスマホで見た時に画面から見切れたらまずいので画面におさまるようにしましょう。

どのスマホの画面におさめるかですが現在一番小さい画面サイズがiphone8(SE2)なのでそのサイズに合わせればいいです。

コーディングするときですがデベロッパーツールを使うはずですがその画面を完全に信用してはいけません。

あくまで検証なので実際と表示が違う時があります(私は実務で何度も失敗して社員にブツブツ文句を言われています 笑)。

画面の確認ですがGitに上げて自分のスマホで確認すればいいです。

ProgateでこのページにGitへ上げる方法を解説していますのでGitに上げる方法を知らないなら使って下さい。

私はiphone8を持っていましたが持っていない人は中古でいいので買った方がいいです。

それと画面確認用のAndroidも安い物でいいので買った方がいいです。

なぜ買った方がいいかですがfont-familyを明朝に指定してもアンドロイドでは表示されない時がありそれが起きてないかを確認するためです。

ハーウェイのAndroidが1万円台で安く買えます。

話がそれましたが戻します。

タブレット、PCの画面の時は私が働いている会社はヒーローイメージは画面いっぱいに広げてなかったです、これは働く会社で変わるはずです。

めっちゃざっくり言うととにかくスマホの画面がしっかりしてればいいんです。

 

LPの右上にあるTwitterとFacebookのアイコンと「jonio cafe」の並べ方

↓の赤枠ですがこれはProgateで見ています。

画像の上に配置しないといけないので「position-absolute、position-relative」で実装できます。

今できなくても大丈夫です、その内できるようになりますから。

忘れたら以前実装したコードを見ればいいんです、私はそうしてます。

 

font-familyを切り替えてメリハリを付ける

↓ですが段落タイトル(赤枠)と説明文(青枠)でfont-familyが切り替わっているのに気が付きましたか?

赤枠と青枠でfont-familyを変えています。
赤枠のフォントは明朝で青枠のフォントはゴシックです。

 

font-familyですが段落タイトルと説明文で切り替えるとメリハリがついて閲覧ページが読みやすくなります。

font-familyですがゴシックであろうと明長であろうと色んなタイプがあるので指示に合わせて変えればいいです。

今はとにかくfont-familyを変えないといけないと覚えておきましょう。

 

間隔の開け方について

1回目の解説で段落の切り替わりで思いっきり開けた方がいいと解説しました。

↓の緑色の矢印です。

どれ位のpxにするかですが私が働いている会社は細かく指定はなく「デザインカンプみたいな感じで」としか言われていません 笑

雑ですよね 笑 製作会社はこうではないと思いますが。

だからpxについて細かく考えない方がいいです。

 

最後に一言(じゃないかもしれない)

WEB制作の仕事をしたいならコーディングができたりサイトが作れるだけではダメです。

検索した時表示される順位(検索順位と言います)がありこれができないといけないのですが(SEO対策と言います)凄く難しいです。

それができるようになる為にもブログを運営しましょう。

どうやって運営するかは次回以降ののデザインカンプの解説の最後で説明します。

今回のコーディングの最初の方で私が採用された要因の説明をしたのですがブログをやってSEO対策をしていたんです。

SEO対策をは何をしていたかよりもブログに関してまずしないといけないことがあるのでそれは他のコーディングの解説で説明します。