ハニワマンさんのコーディング課題をコーディングしてみました

ハニワマンさんのコーディング課題をコーディングしてみました。
コーディング課題に挑戦しようと思った理由や作成方法などを書いていこうと思います。

ハニワマンのコーディング課題は以下のURLから確認できます。

コーディング課題に挑戦しようと思った理由

今回、ハニワマンさんのコーディング課題に挑戦しようと思ったのには理由があります。
実はわたしはAdobe Illustratorからコーディングしたことがありませんでした。

そのため1件、コーディング案件に挑戦しそこなったのです。
そこで今後、Illustratorからのコーディング案件があった場合には応募できるようにIllustratorからコーディングしてみたくなったのでした。

ちなみにハニワマンさんのコーディング課題は、Illustrator以外にPhotoshopとXDのデザインカンプがあるため、これらからのコーディングもできます。

わたしがコーディングした制作物は、次のようなものです。
画像をクリックすると、制作物を掲示したサイトに飛びます。実際のコードも見れるので、興味ある方はご覧ください。

ハニワマンさんのコーディング課題を見ると、上から順に

というように大きく4つのブロックに分かれています。

ブロック自体、多くはないですし、また各ブロックも複雑な構成ではありません。
初学者向きのコーディング課題だと思います。

この中で難しい部分と言えば、ヘッダーの部分と、メインコンテンツ部分の6つのタイル状の記事をどうするか？　という点でしょう。
あと、このデザインカンプはパソコン用なので、スマホ用にはどのようにコーディングするかが、腕の見せ所ですね。

まずデザインカンプ全体の長さと左右の余白を除いたコンテンツ部分の長さを計ります。
するとデザインカンプ自体の長さが1366px、コンテンツ部分の長さが1180pxとわかります。

続いて主な配色や、フォントファミリー、フォントサイズ、フォントの太さなどの基本的な情報をまとめます。

もっと長いデザインカンプであれば、ここから各ブロック間の共通部分のコーディングをどうするか考えるところですが、今回のデザインは分量少なく、共通部分もあまりないので（共通部分はコンテンツの長さ1180pxのところくらいでしょう）実際にコーディングに入っていきます。

わたしの場合、コーディングは各ブロックの簡単なところから作り始めます。

デザインカンプの順だと、ヘッダーからコーディングすることになるのですが、ヘッダーは情報量が多いし、スマホ対応などのときのハンバーガーボタンの設定など、面倒なことが多いので後回しにします。

そこで今回は、メインビジュアル部分とフッターから作っていくことにしました。
メインビジュアル部分の画像は背景画像として表示させる方法もあるのですが、今回はHTMLに画像を配置しました。

フッターの文言はdisplay:flexを使い、ブロックの中央に来るように配置しています。

続いて Headline（メインコンテンツ部分）に取り掛かります。
この部分には6つの記事がタイル状に並べられています。

この部分について、わたしはgridレイアウトを用いて記事を配置しています。
gridレイアウトにしたことで、各記事間の余白についてもgapを使うことで余白を開けることができました。

最後にヘッダーを作成します。
ヘッダーはパソコン用のデザインではそれほど難しくはありません。
ロゴやナビゲーションメニューの横並びはdisplay:flexを使うことで解決できます。

しかしスマホ用のデザインは面倒ですね。
今回はスマホ用のデザインがありませんので、自分で設定しなければなりません。

わたしは画面サイズ767px以下のときは、メニューを非表示とし、ハンバーガーボタンをクリックすることで、メニューが表示されるようにしました。

メニューの動きにはjQueryを使い、slideToggleでメニューが開閉されるようにしました。

当初予想していた通り、コーディングのデザインとしては難しくはありませんでした。

けれど今回のコーディングをしようと思った根本原因である、Illustratorの使い方には困惑させられました。

特にブロック間の余白が取れないのが大変でした。いちいち手動で測らなければならないので。

今回のコーディングを完了させるのに3時間半かかりましたが、そのうちの半分以上はIllustratorの使い方に戸惑った時間でした。

とはいえ、一度使い方を覚えてしまえば、次回以降はかなり素早くコーディングできると思います。たのしい経験でした。