新Lesson7｜つまずきポイント解説 – 平原と愉快な仲間達の独り言

こんばんは、講師の錦織です。
前回の鈴木先生に引き続き、新lesson7でよくつまずいている部分を解説することで、カリキュラムはもちろん、実務でも役立てていただければと思います。

今回は、新着情報と事業実績について解説していこうと思います。
現在取り組んでいる方はもちろん、まだ取り組んでいない方、カリキュラムが終わった方も、新着情報と事業実績は、実務でもよく出てくる部分になりますので、参考にしていただければと思います。

つまずきポイント①

新着情報のデザインカンプ(PC版)

提案書提出後は、いよいよデザインカンプの制作に入りますが、ここでつまずく方が多いため、まずはそのポイントから解説します。

lesson7からは、ご自身でデザインを考えながら制作していただきますので、新着情報はFVなどに比べるとスルーされがちなのですが、デザインカンプでよく提出されるのが下記のデザインです。
カリキュラムのlesson6で、一度作成させているのですが、基本を忘れてしまっている方も多く、似たようなデザインで提出されるケースが見受けられます。

多くのデザインカンプでは、

・文字が大きい。
・コンテンツ幅の1140pxを超えている。
・余白がバラバラで揃っていない。

このような状態になっているケースが多く見られます。

主に、上記の3点がよくあることですが、まず理解しておいていただきたいのが、Elementorで制作する場合「Premium Addons for Elementor」というプラグインで制作すると思うので、基本の形を覚えていただくのが良いと思います。

その基本の形というのが、lesson6で制作したメタラウンジのお知らせのセクションを例にしています。

まずは、上記のデザインを参考にデザインカンプを作成してみましょう。

あくまでも基本の形なので、もう少しデザインを変えたい場合は、変更していただいても大丈夫ですが、もしデザインを変えたい場合などは、ご自身で使えるプラグインを探したり、CSSなどを使って制作していただくことになります。今回はカリキュラムということと、まずは制作するのに慣れていただきたいので、上記のデザインで進めていくのがいいと思います。

そして記事タイトルは、カリキュラムのレター通りに記載し、日付は架空で大丈夫ですので記載するようにしてください。文字の大きさ、コンテンツ幅、余白に気を付けながら作成してみてくださいね。

つまずきポイント②

事業実績のデザインカンプ(PC版)

次に多くの方がつまずいているのは、トップページの事業実績のデザインカンプです。

ここも新着情報と同様に、プラグインで自動表示したい部分です。
新着情報は、前回lesson6で作成しているので、すぐに思い出せる方もいらっしゃると思いますが、
実は事業実績の参考も、以前にカリキュラムで作成されています。事業実績という名前ではありませんが、lesson5にある高度な実装の「コラム」です。

皆さん、思い出されましたか？
事業実績は、このコラムを参考にしましょう。
このコラムでは、画像・タイトル・日付を表示していますが、lesson7では、「画像・タイトル・サブタイトル（詳細）」を載せていきます。

この段階では完全に再現する必要はありませんので、参考にしながらデザインカンプを作成していきましょう。

因みにこの事業実績の部分は、次のポートフォリオを制作するカリキュラムでも使えますので、ぜひ覚えておいてくださいね！

つまずきポイント③

SP版のデザインカンプ

PC版は問題なく作成できても、SP版になると多くの方がつまずきやすくなります。

SP版のデザインカンプを作成するときに気を付けてほしいのが、

SP版のカンプは「2倍サイズ」で作るため、フォントサイズを含め、すべての要素を実際の表示サイズの2倍で作成する必要があります。
実際に16pxで表示したい場合は、デザインカンプ上では32pxで作成し、余白を20pxにしたい箇所は40pxにするということです。

SP版のデザインカンプは780pxで作りますが、
スマホ画面の物理的な横幅は390pxとか414pxとかです。
なので、カンプの横幅がすでに2倍になっています。これに合わせて全てを2倍にします。

なぜ2倍サイズにするかというと、Retinaなどの高解像度ディスプレイに対応するためです。
主に画像のための対応で、高解像度ディスプレイで実寸サイズで書き出した画像を使用すると、実質2倍に引き延ばされて画質が悪くなってしまいます。そのために2倍サイズで画像を作って書き出す必要があり、「カンプ全体を2倍にする」ということです。

そしてPCとSPでは、全ての要素のサイズが同じにはなりません。
例えば同じ見出しでも、PCでは50px、SPでは36pxなどと調整しますよね。自己紹介サイトやメタラウンジHPでもそうした調整を行ったと思います。
この場合、SP版のカンプは36pxの2倍=72pxにします。
逆にいうと、SP版カンプ上で72pxにした見出しは、「実装時に36pxにする」ということです。

SP版のデザインカンプを作成するときは、上記の内容に気を付けながら作成してください。

まとめ

いかがでしたか？
新しいlesson7は、以前よりも学習内容が充実していますが、実はカリキュラムlesson6までの間に参考にしていただける部分は沢山あります。デザインカンプもそうですが、実装になったときも「どうしたらいいかな？」と悩んだときは、もちろん講師に聞いていただいて大丈夫ですが、そんなときは一度カリキュラムを見返すと参考になる部分が沢山あります。今までのカリキュラムも見返しながら、カリキュラムも実務も進めてみてくださいね。