くりのすけさんのコーディング練習noteに学んで架空サイト作り。感想と反省まとめました。

制作物

こんにちは！五十嵐です。

今回はくりのすけさんのコーディング練習noteにてコーディング課題をクリアしたあと、架空の雑貨屋さんをイメージしてデザインとカスタマイズをしました。

架空サイトが確認できるURL→(http://igarashi-web.com/kurinosukesan/coconi.html)
BASIC認証を掛けています。
ID・Passwordともに[jisseki]です。

カスタマイズのテーマ
今回は小さな雑貨屋さんのHPを想定し、フリー画像のお店のドアの色をメインカラーに据え、トライアド配色のピンクをアクセントにしました。雑貨屋さん巡りが好きな女性が好む、柔らかいイメージをテーマに、写真や背景に丸みをつけました。また、スマホのメニューはにゅるんと柔らかく動くアニメーションを意識し実装しました。
作業時間
教材通りのくみ上げ 2.5時間
デザインを考え実装 5.5時間

 

制作環境
OS Windows10
エディター Atom
使用した言語 HTML/CSS/Sass/JavaScript

ここから先はプログラミング学習中の皆さんに向けて

「くりのすけさんのコーディング練習noteを経験して私が得たこと」を書きます。

この記事を読み終わるころには、きっとあなたも、このnoteに挑戦したくなっていることでしょう。

くりのすけさんのコーディング練習noteとは

くりのすけさん(＠kurinosuke32)が制作された「コーポレートサイトのTOPページ」のコーディング練習教材です。

progateのHTML/CSSを一通り終えたくらいのレベル設定で作られていること。そして「自分なりにカスタマイズしたらポートフォリオとして掲載してOK」という駆け出しの身には非常に助かる、ありがたい教材です。

noteは4部構成になっておりまして、最初の①は無料で見られるようになっています。
このブログを読んでちょっとでも挑戦してみようかなと思って頂けたら
是非是非覗いてみてくださいね。

私の教材への取り組み方の流れ

まずは私の取り組み方を紹介します。

  1. コード解説を見ずに課題の画像を見て模写コーディング
  2. noteのコード解説を読む
  3. カスタマイズするにあたってテーマを考える
  4. キャッチコピーや文章を考え写真を準備
  5. カスタマイズコーディング
  6. レスポンシブ実装

この流れでやってみました。


と、くりのすけさんご本人からもリプを貰えてテンション上がりまくり。

教材をやってみて

模写にかかった時間は2時間半ほど。
学んだことと感想をまとめます。

学んだこと

ネタバレになっちゃうのでサクッとまとめます。
ここで解説しちゃうと、くりのすけさんが推奨しているググる力がアップしないので「なにこれ？」って思ったら是非ググってみてください。

  • SEOを考えたHTML構築
  • <nav><figure>の存在
  • クラス名の付け方
  • グレーのボードの作り方
  • imgはHTMLでいれるか、それともCSSのbackground-imageでいれるか。

感想

今までいろんな模写をしてきたけど、模写後にこれほど正しいコードを見たことはなかったなとちょっと反省。

くりのすけさんのコードはわかりやすいうえ、シンプル。
クラス名も的確で必要なことのみ記載しました、って感じ。
次、変更を任された人もきっと嫌じゃない。
何がどこに描いているかわかりやすいものでした。

私もこうやって綺麗に書けるようがんばらなくては。

私がカスタマイズに挑戦した理由

こちらの教材で実際にコーディングをしてみたら
そのあとにカスタマイズすることをお勧めします。

私自身カスタマイズしてみてこんなに変わりました。

カスタマイズしたら実績に掲載可というありがたい教材

先述しましたがこの教材は

ポートフォリオとして、掲載していただいてOK

※ただし、練習用としてください。なるべく、そのまま載せるのではなく、自分なりにカスタマイズしてください。

とカスタマイズしたら実績に載せて良いという、ありがたい教材なんです。

駆け出しの身の私は実績がまだまだ実績が少ない。
そして何を実績に載せていいのかもわからない。

実績が少なければ、なかなか案件獲得に繋がりません。
なのでせっかく許可していただけているなら、実績にさせて貰っちゃおう！
とカスタマイズしました。

カスタマイズを経験して得たこと

カスタマイズするにあたって考えることはたくさんありました。

デザイン込みのお仕事のような経験

・どんなお店？
・テーマカラーは？
・キャッチコピーは？

これはデザイン込みのお仕事をする際に必要となる考えだなとひしひし思いました。
クラウドワークスでお仕事を探していると

・ワイヤー、ラフ案：なし（相談したい）
・画像、文章等：なし（相談したい）

「文章・画像も用意してください」

と記載されている案件をよく目にします。
こういった案件ではこちらから提案し、お互い考えを言い合い、推敲していかなければなりません。

この視点は今までただ模写をしていただけでは思いつきませんでした。
今回のカスタマイズでこういった想定の経験が必要だと気づかせてもらえたのは大きな収穫です。webデザインからコーディングもすべて任せてもらえるようになりたい私は、今後この力もつけていかないといけないなと気づきました。

頑張ったところ

なんといってもデザイン全般が難しかった。

  • キャッチコピーや文章の作成、配色
  • 柔らかく、まあるくの表現
  • 写真選び

などなど。

ただ単に経験の少なさもあるけれど、デザインの奥深さを感じました。
「心理的にこう」とか「目の動きがこう」とか、ちゃんと理論的に組み上げて、クライアントさんに説明できるデザイナーになれるよう、まだまだたくさん勉強しなくてはなりません。

反省

コードがめちゃくちゃに。

デザインしてからコーディングという流れではなかったので、いろいろコードを変えながらデザインしてしまいました。
その結果、変なところにmarginが入ったり、コードの書く位置がおかしかったり……。
変更に強いコードを書くためにも、あらかじめしっかりとデザインする必要があるのだなと思いました。

スマホのメニュー

今回メニューには拘りました。


私は「三」のメニューはあまり好みでなくて今回はガッツリ「Menu」と書きました。
そこからtransitionを使ってにゅるんと全画面に広がるCSSを書いて実装。柔らかさを表現できているのではないでしょうか。なかなか気に入った出来です。

カスタマイズって難しそう……って思っている方へ

今回の私のカスタマイズは

  • スマホのハンバーガーメニュー
  • メニューをおしてスクロール移動

にはjQueryを使っていますが、
他の部分は特に難しい技術を使ったわけではありません。

progateをクリアした人なら1度は目にしている方法でカスタマイズしました。

・background-colorをつける
・imgにborder-radiusで柔らかい印象を与える
・imgにborderでアクセント
・hやpにletter-spacingで文字と文字の幅を与える

これだけでも大きく印象を変えられます。
是非カスタマイズに挑戦してみてください。
よりレベルアップできる良い経験になりますよ。

まとめ

くりのすけさんのコーディング練習教材は
練習になってレベルアップできるし、
正解とされるコードと自分のコードと比較できるし、
カスタマイズしたら実績にも載せて良いし
『最高!!』

是非みんな挑戦してみてね。

私以外の人の感想や進捗報告はこちらから！

くりのすけさん、この度はこのような教材をつくってくださりありがとうございました。

タイトルとURLをコピーしました