この綺麗なWebサイトが「いかにして作られているのか？」

その全行程を、西さんが「1から10まで」超具体的に説明してくれています。

• WordPressで綺麗なWebサイトを作りたい
• WordPressで仕事を受注してみたい

方には、必見の内容です。

「バラバラだった知識が、1つに繋がった感じがしました」

西さんが、超具体的に「ここはこうやって装飾して」「ここはこう考えて、、」と1から10まで教えてだいた結果、面白いことが起こりました。

それが、インタビューをした辻本さんの中で

• 「バラバラだった知識が繋がったこと」

です。

実際にビデオを見ていただくとわかりますが、WordPresをUIKITを使ってカスタマイズしようと思うと、あらゆる知識を導入する必要があります。

例えば、

• 参考になるサイトを「要素の検証」を使って裏側を覗き込み
• HTML、CSSの知識を使って「いかにしてデザインされているか」を分析し
• WordPressのトップページを、固定ページに設定して
• 作りたいデザインを作るために、UIKITで部品を探して
• さらにCSSを少しだけ微調整して、、

と、このような感じです。

決して1つの分野のスキルだけでは、Webサイトを作ることはできません。

あらゆる知識を総動員して、組み合わせながら作成しています。

とはいえ、たくさんの事を学ばなくてはならないと落胆する必要はありません。

西さんは、これらの知識を「その場で調べ」「学び」作っています。UIKITのパーツは無数にあるので、その場で作りたいデザインに近いものを選び、ドキュメントで使い方を調べ、実際にWebサイトに当てはめながら作っています。

辻本さんは、その様子を見ることで「学びながら作る」感覚を身につけたのだと思います。

辻本さんの最後の感想として

• 今までは、『WordPress』『Kansoテーマ』『CSSフレームワーク』を1ずつ勉強してから学ぼうと思っていましたが、全部が繋がっているように見えました
• 「早速、明日からはWordPressでWebサイトを作りながら学ぼうと思います」

とおっしゃっていました。

「良い事例を見ること」は、今の自分の理解のレベルを知ることと同時に、知識同士のつながりを知る良い機会になるのだなと思いました。

西くんの学び方

西くんに「どんなプロセスでこんな綺麗なWebサイトを作ったのか」を聞いたところ、快く教えてくれたので、公開します。ぜひ、真似して見てください。

1, 自分が作りたいと思ったWebサイトを探す
2, なぜ、自分がそのサイトが良いと思ったか言語化して分析する
3, プロのサイトから学んだデザインのコツを反映させたWebサイトを、まずはモックアップ(紙に手書き)で書く
4, UIKITで作りたいデザインに近いパーツを選び、使う
5, CSSを使って、微調整する

です。

ポイントは、「どんなものを作るかは明確に決めておいて」「作業をする時は、どうやって作るかだけを考える」ことらしいです。

上の工程で見ると(3) までは、何を作りたいかを模索していて、(4) 以降で、調べながた作っています。

工程を分けている理由は、これらを一緒にすると混乱し、いつまでたってもWebサイトが完成しないためのようです。

ぜひ、

• Webサイトがなかなか完成しない
• 作成にすごく時間がかかる

方は、真似して作ってみてください。

ビデオの中で、詳しく解説をしているので、ぜひ見てみてください。