Webデザインの独学法
本記事の資料です。文章が長いので２画面用などにどうぞ
おそらくこの記事を読んでくださっている方は、多少なりとも「デザインの勉強について不安がある」「指針がほしい」という気持ちをお持ちではないでしょうか。
僕自身半年ほど前からデザインの勉強を始めたのですが、最初はなにがなにやらわからず記事を読んでも本を読んでもなかなか前に進めませんでした。しだいにYoutubeやPrime Videoに逃げたりゲームにふけこんだり、そして自己嫌悪をする日々です。
そんな中でも、ようやく先日納得がいくwebサイトを作成することができました。
完成して喜んでもらえた際は涙がこぼれ、「あーがんばってよかったなー」ととてもスッキリした気持ちで眠れたことを覚えています。
公開の後「webサイトデザインの作り方」や「実装方法」などの記事を書いたのですが、どうしてももう一つ書きたい記事がありました。
それが独学でwebデザインを学ぶための方法です。
たぶん僕以外にも同じように苦しんでいる人がいて、それでもやめたくないともがいているはずです。そんな方向けに、初心者から少し進んだ今だからこそ書けると思いこの記事を執筆しています。
「デザインを早く、独学でなんとかする」というスタンスの昔の僕に向け、必要なことをできる限り絞って書く予定です。
本記事が少しでもみなさんの前進の糧となることを祈っています。
💡
対象者：webデザインをはじめた人、はじめている人、昔の自分
内容：ゴールに応じた教材とロードマップの紹介
デザインの前に少しだけ「独学」の話をしたいと思います。
ロードマップだけ欲しいという方はセクションを飛ばしてください🏃♂️
はじめに.「学びつづける」ために必要なことはなにか
💡項のまとめ
・モチベーションと環境、適切なロードマップによって学びは成功する
・スクールはこの両方が入手できるため可能であれば入るべき
・難しければモチベーションの維持と環境はSNSを通した繋がりの構築、コミニティへの参加がおすすめ
・ロードマップは本記事で紹介
これまでたくさん独学を挫折してきました。受験勉強、音楽、小説、歴史、絵（再起中）、ペン字（再起中）などなど数えればきりがありません。途中で目をそらし始めるんですよね…🤦♂️
だけど、今回はちょっとうまくいきました。
これは成功確率をあげるために自分自身ちょっと意識をして、それが功を奏したからではないかなと考えています。実は、前職、前前職が教育関連で学びを考える機会が人よりも多くあったんですよね。
初めにまとめておくと、独学に必要な要素は
・モチベーション(動機づけ)
・適切なロードマップ
の２つです。
本セクションではこれらを深堀りしていきます。
まずモチベーションですが、それぞれのものをみなさんがお持ちだと思います。僕の場合は昔から表現が好きで、小説や演劇などに打ち込んでいました。そこに昨今の情勢が絡み、もっと気持ちが伝わる世界にしたいと考えたことがweb制作者を目指したきっかけです。みなさんも、どこか熱い気持ちを持って学習を始められたと思います。
しかし、辛いのがだんだんと気持ちが冷め諦めてしまったりすることです。目標があるけど負担だから距離をおいてしまう。
なので、そんな状況を防ぐために僕たちはどうにかしてモチベーションを維持し続けなくてはいけません。
また、学ぶためには教材が必要ですがAmazonで検索してもブログを見ても沢山の種類があり、広告も混ざり、質も玉石混交です。加えてそもそも初心者には知識がないのですから正しい選択はできません。あまり良くない教材で進めてしまうと、それこそよくわからない状態が続き投げ出してしまう確率が高くなります。
したがって、間違った選択、選択の負担を解消するためにも適切なロードマップが必要です。
それでは、早速このモチベーションの維持とロードマップの解決策を探っていきましょう。
第一の解決方法はスクールに通うことです。
独学という題名のなか申し訳ないのですが、自分はこれを一番におすすめします。
もし挫けて自分の中のやる気がなくなったとしても、スクールは強制的に学習を進めます。これにより外からのモチベーションが与えられるため学習の継続可能性が高いです。これは僕たち自身小中高校で体験してきました。
また同じ志を持つ仲間がいるため励まされ、時に競争意識を持つことにより自分の中のやる気も自然と上がります。(内発的動機と外発的動機の両立)
教材とロードマップもプロが組んだものです。長年の教育で培われたノウハウが詰め込んであり、高い信頼が持てます。なにより質問が可能だということが最大のメリットです。
しかし…
高いんですよね…
自分が行きたかった学校は最低70万〜(「から」なんですよね…😖)と捻出できそうにありませんでした。
質が高いぶん仕方ありません。
なので、僕たちはなんとか独学でこのスクールの環境を模倣していく必要が出てきます。
そこで落ち着いた方法が
・SNSでwebデザイン勉強中、webデザイナーの方をフォローしまくる
・デザインのコミュニティに属する
でした。
まずtwitterのメインアカウントで検索をかけ、素敵だなぁと思う方をたくさんフォローしました。するとタイムラインに「頑張っている」光景が否が応でも入ってくるので「自分もやらなきゃ…」と焦りながらも勇気づけられます。活動を続けているとフォローしてくれる方もちらほら増えてきて、反応がもらえると(自己承認的な)達成感も得られました。フォロー＆フォロワーの関係になるとより絆が深まった気がして「やんなきゃマインド」がさらに上昇です。
次に自分をちょっと褒めたいのがデザインのコミュニティに属したことです。一つ目の良さはSNSで得られるメリットの延長です。やりとりが増え孤独な戦いも薄れ、やる気がでてきます。コミュニティに属することにより人は安心するため、メンタルも落ち着いた気がしました。
そして、もう一つの良さが質問のできる環境を得られることです。独学だとどうしても解決できないことがあって躓きます。僕は昔宅浪して受験失敗したのですが、あきらかにこのせいでした。もし今後受験される方がいたらYahoo!知恵袋で参考書の質問をしまくるのは悪手です。他の手を打ってください。
しかし、知っている人からするとぱっと分かることだったりします。初心者はそもそも「わからないことさえわからない」、「検索のキーワードすらわからない」というケースが多いので質問の環境は必須です。わからないことをわからないままを放置するとモチベーションの低下にも繋がります。
以上が独学でモチベーション維持し、質問できる環境を得るため戦略です。
このコミュニティについて、僕は「ONLINE上司」に所属しとっても×∞お世話になりました。
上司ニシグチさんが運営する、あたたかさと距離感がすごいちょうどいいコミュニティです。
コミュニティについては他にもたくさんあると思いますので、みなさんの性格や考え方にあった場所を選んでみてください。
以上が、外部からの強制力がない分自分の中のやる気を目一杯高め挫折しない方法です。さらに、独学の際にネックとなる疑問解消のための環境を用意しました。
モチベーションの低下を防ぎ上昇させ、
残るは質の良い教材とロードマップですね…！！💪
ここは大丈夫です。紀伊國屋書店新宿本店に通い、インターネットの海を泳ぎ自分自身が挫折しないよう吟味に吟味を重ね作り上げました。
それでは、次のセクションから紹介してきます。
参考情報
独学する方全員におすすめしたい本です。約800ページに独学のエッセンスが詰め込まれています。
迷ったときの指針になってくれるはずです。
作業に集中し時間を作るための方法集です。スマホの通知は切る。
何回も読んで「俺もがんばんだよ…！😭」となりました。感情を震わせるとやる気も出てきます
・ 「もうだめだ…」と思ったときは銭湯かサウナに駆け込みましょう！スマホとイヤホンをロッカーに遠ざけてくれるので自分自身ときちんと向き合えます。整って気分もスッキリ爽快！スーパー銭湯ならそのまま作業も
・近くにない、サウナが苦手な方は財布と鍵以外置いて散歩なんていかがでしょうか
おさらい.Web制作の全体像とゴール
💡項のまとめ
・本記事ではwebデザイナーをゴールとしデザインと実装のロードマップを提供
・転職、フリーでの活動などゴールに応じてロードマップを選択
ゴールを明確にするためにWeb制作の全体像を把握しておきます。
まず、Web制作は大まかに４つの工程からなると考えられます。
ここでWebデザイナーが担当する箇所はデザインと実装です。
webディレクターがまとめてくれた情報をもとにデザインの工程でワイヤー, デザインカンプの作成を行い、実装の工程でHTML, CSS, Wordpressなどを使用しデザインを使える形にしていきます。その後、どれくらい人がいらっしゃったのか、どのボタンがクリックされたかなどを元にディレクターやマーケターが解析運用、再びデザインに反映していくといった流れですね。
この記事はデザイナーの方向けですので、主にデザインと実装に焦点を当てて情報をお伝えします。デザイン編がメインですが、デザイナーが実装を担当することも多いと考え実装の詳細も加えました。
デザインのロードマップは共通で、ここだけ読んでいただいても構いません。
実装のロードマップは昨今の状況を考え分岐を3つほど用意しています。
A. ノーコード（Studio, Wordpress既存テーマ利用 ）
B. コード（HTML, CSS, javascript）
B-α. PHP, Wordpressカスタマイズ
B-β. Vue.js(Nuxt.js), HeadlessCMS, Netlifyを使用
詳細が気になる方は以下の実装ロードマップから！
Webデザインのロードマップと教材
早速本記事メイン、webデザインのロードマップです！
が、その前に一度そもそも「Webデザインとはなにか、Webサイトは何のためにに存在するのか」を考えておきましょう。
これが意識できているかいないかで勉強速度が段違いに変わります。
そうです…
僕最近までなんとなくやっていたのであっち行ったりこっち行ったりしてたんです…
みなさんは直線を進んでください
💡ざっくりまとめ
・webサイトは機能性と情緒性にわかれる
・機能は情報伝達や使いやすさに関するもの
・情緒は感情や心に訴えかけるもの
・機能と情緒が合わさりwebページが完成する
・そのために各種パーツを設計していく作業がwebデザインである
※以下の情報は金 成奎さんの著書、「Webデザインの思考法」に強く影響を受けています。合わせてご覧ください。
ではまず「Webサイトが存在する理由」ですが、これは情報をお伝えするためです。
試しにサンプルテキストを元にWebページを一つ作ってみましょう。
お分かりだと思いますが、全く情報が頭に入ってきません。文字は小さく読みにくく、どこに着目すれば良いか見当がつかないからです。これでは情報はお客様に伝わりにくく、折角つくったwebページも役に立ちません。
したがって、ここでデザインが力を発揮します。
新しいページを見ると、情報がスッと入ってきます。
このような、
・目立ちやすく
・わかりやすく
・使いやすく
といった、人のことを考えてそれぞれのパーツを変化させ情報を伝わりやすくする作業が機能的観点からのデザインです。
しかし、みなさんが普段見るwebページはこんな殺風景ではないはずです。このようなデザインを見かけるのはWikipediaくらいでしょうか。もしなんらかの公式ホームページがこのようなデザインだった場合無機質で近寄りがたい印象を受けます。
これは僕たちの心に働きかける要素、情緒性が足りていないからです。
たとえば、さきほど作成したwebページに対し適切なレイアウト、色などを施せば「かっこいい・かわいい」といった印象をもたせることができます。例として先程のwebページを「和風で上品」「かわいくてポップ」にしてみました。
このように機能と情緒が組み合わさることでwebサイトが完成します。
それでは、一体この機能と情緒性をどのように表現すれば良いのでしょうか。
答えは
・レイアウト
・写真やイラスト
・色
・タイポグラフィ
・形やあしらい
・アニメーション
というwebサイトを構成するパーツにそれぞれ機能性と情緒性を持たせることです。
今回は、まずはじめにフォントのサイズ・行間を調整することにより機能性を向上させていました。
次の左側の例では、配色、フォント、テクスチャに和風な要素を
右側の例では、レイアウトやフォント、配色などを工夫してかわいい雰囲気にしています。
まとめると、用意した情報に対し表現したい機能や情緒に合わせて、適切なフォントや写真などを取捨選択する行為がwebデザインといえるのではないでしょうか。
言い換えれば、
・見やすくするためのデザイン
・感情を揺さぶるためのデザイン
この２つをマスターして組み合わせることができるようになれば思い通りのWebサイトが作れる。
ということです！
そのためには先程あげたパーツをどう変化させれば見やすくできるのか、どうすればエモくなるのかを勉強していく必要があります。
早速、どんな道筋で何を学べば良いのか見ていきましょう！
はじめに理論：基礎で全体感を把握しておきます。今後の学習の土台になるものです。デザインを起こすためにはツールが必要であるため、次にツール：基礎でWebデザインでよく使われるAdobe XDを抑えておきます。
ここで一度手と頭を動かしておきましょう。実際にWebデザインに触れてみると「ここがわからん…」「あ、でもここは得意かも！」という風に学ぶべきことのあたりをつけることができます。そのまま発展へ進みますが、この作業はずっと続けていくのがベターです。日々Webデザインに触れることにより自分の成長を認め、課題を発見するためです。
理論：発展では先に上げたようなデザインのパーツについて機能と情緒の観点から深堀りします。ツール：発展ではおなじみillustratorとPhotoshopを扱いちょっとしたイラストや写真の編集を学んでおきます。
これで準備が整いましたので、実践：発展で仕上げをしたくさんWebデザインを作っていきましょう。
以下、教材の紹介とポイントです。
理論：基礎
難しいことなくデザインの全体像を抑えられる良著です。文字が少なく、負担なく読み進められます。
バイブルその１です。なるほどデザインから数歩踏み込んでデザインの全体像が抑えられます。大事なことしか載っていません。
僕のデザインの考え方が変わった本です。これを読み込むと再現性の高いデザインについてわかるため、学びが効率化できます。
ツール：基礎
基本スタンスとしてツールの基礎的な使い方は動画で学びましょう。書籍は辞書的な使い方であればよいのですが、初心者が学ぶには少しハードルが高く非効率的です。動画であればどこで何をするのかが楽に目で追えるため理解しやすく記憶に残ります。
発展的な内容は好みだとは思いますが、動画で学ぶ必要は必ずしも無いと思います。必要に応じて検索できる書籍が個人的には好きです。
XDについて動画で学べるAdobe公式教材です。数分の動画なので全部見ても良いですし、「なんとなくわかった！」となれば切り上げてその都度見るのでもOKです。
実践：基礎
毎日素晴らしいWebデザインに触れ、少しずつインプットしていきます。
着目すべきはもちろんパーツです。どんなレイアウト・配色・写真・タイポグラフィなのか、そしてどのような機能（わかりやすさ）と情緒（心に訴えかけるもの）を持っているのか、それはなぜか。パーツに分解して、「なぜだろう」と考えていきます。
見るだけより分析、トレース、模写したほうが得られるものは多いです。しかし、ただでさえやることたくさんなので、少しずつ進んでください。張り切ってノルマを課しまくっていた僕は「もうサイト見たくない…」となってしまいドロップアウト一歩手前でした。
webデザインギャラリーをチェックするのも毎日１サイトぐらいで良いと思いますよ…！
ただ、この時点だと
「いや、なんでこれがいいのかわからん…😑」
となる可能性が高いです。僕がそうでした。
自己嫌悪に陥りそうですが、これはわからないことがわかったという良いことで、成長です。
さっそく新しい理論を武装してもっとデザインを分解していきましょう。
理論：発展
「レイアウト・配色・写真・タイポグラフィ・あしらい」を深堀りしていきます。このロードマップの順番にした理由は左からデザインへの影響力が高いためです。
たとえば、飾り(あしらい)の形をばっちりきめたとしても、配置(レイアウト)が変わるとデザインは破綻します。先程のロードマップを見ていただくと分かると思うのですが、実はあれほぼグレーでレイアウトしただけなんですよね。
なので、勉強をすすめる際も大事な順にやっていきましょう！
もう読んでるかもしれませんね。要素感の余白に応じて情報の伝達しやすさ(機能)は変わります。さらに余白が多ければスタイリッシュな印象(情緒)に。その概観をつかめる本です。
レイアウトをさらに深堀りした本です。デザインの４原則近接・整列・反復・対比にはじまり、レイアウトが与える印象やその種類を豊富に紹介してくれます。
色の差が大きければ伝わりやすさが、色の種類に応じて印象が変わります。色の理論について簡単に抑えた後、豊富な色サンプルとその解説を行ってくれる書籍です。配色に悩んだ際にも参考になります。
写真はすごいです。全ての情報の中で最も伝わりやすい傾向にあります。情報伝達の役割とともに強く印象づけを行えるのが写真です。しかし、写真もまた色の集合であるため印象は先程の配色で学ぶことができます。なので学ぶべきは構図です。写真の中に物体がどのように配置されているかによって印象が大きく変わります。
そこでこの本をおすすめしたい…のですが、少し行き過ぎている気もしなくはないので「デザイン入門教室」の内容だけでも十分です。構図とレイアウトは似た考えでもあるので、可能であればサラッと読んでおいてください。
フォント！わからないですよね〜。でも楽しい！僕もフォント大好きです。そこでまずは「ほんとに、フォント。」を読んで感覚的に、そしてちょっと理論的にフォントを抑えておきましょう。
フォントについて重要なことをほぼ網羅した本です。フォントの種類も大きさの扱いも、成り立ちだって学べます。印象別の書体について記載されているのも個人的に一押しポイントです。
「デザイン作ったけどなんか寂しいのよね…」「ちょっと感じが違うかも…」
あしらいを足しましょう。金ピカな飾り罫を足せば一気にゴージャスな印象に！
最近まで「これ！」という本がなかったのですが、最近ingectar-eさんにはお世話になりっぱなしです。
ツール：発展
「XDだけだと細かいデザインが作れない…」となったらいよいよイラレとフォトショに取り組むときですね。
「ロゴやあしらいなどのパーツを作りたい！」というときはillustrator、
「写真を加工したい！」というときはPhotoshopを使います。
illustrator, Photoshop共にまずはUdemyで学ぶのが良いです。自分は「シュムデザイン新里さん」のものを購入し基本操作を抑えました。サンプルを見てこれだ！と思ったものを選びましょう。
(Udemyは頻繁にセールをやっていますので、1000円代になった頃に購入するのがおすすめです。）
イラレをもっと使いこなしたいと思ったらDESIGN TREKKER様のチュートリアルへ。必要な機能を動画と記事で学べるため、操作で困ることがほとんどなくなります。
フォトショはこの本がおすすめです。わかりやすく、バランス良くレタッチ・加工について説明されています。素材とPSDデータが全てダウンロードできる。というのも大きな魅力ではないでしょうか。
こちらの本は辞書的に使うのがおすすめです。全て覚えようとするときりがないため、写真の編集が必要になれば取り出してください。
実践：発展
「いきなりデザインをやるのは少し気が引ける」という方も多いと思います。そんな方は仕上げに「デザインのドリル」をやりましょう。お手本をトレースして、模写して最後にそのポイントを確かめる。といった流れでたくさんのデザインを頭と体で習得できます。
作ったものはSNSにアップOKの規約なのでtwitterで盛り上がることもできます🙌
そろそろwebデザインを作る頃ですね。最後に残った問題は「それぞれの業種ごとにどのような構成にすれば良いのかわからない」ことだと思います。お問い合わせ、商品紹介ページ…などなど。この本では与えたい印象や業種に応じたwebページの作成方法が詳しく記載されています。セオリーがわかりますので見返すといつでも参考になる本です。
以上が、webデザインを学ぶためのロードマップでした。
あとは作るだけです。
わからなければいつでも教材に戻って、いろいろなwebデザインを参考にしてみましょう。
そのたび自分の不出来さにつらい思いをするかもしれませんが、それもまた一歩ずつ進んでいる証です。
少し長い道のりかもしれませんが頑張りましょう！遠くから応援してます！
一緒にwebデザイン、楽しんでいきましょうね！🙌
参考情報
・進め方をもう少し詳しく抑えたいという方はハラヒロシさんのnoteへ！
・手前味噌ですがこちらも
・素材や日々の情報収集のリンクです。補助資料としてどうぞ
・企画やディレクションを知りたい方は「Webディレクションの新標準ルール」を。ベイジさんのKnowledgeも非常におすすめです
・webデザインはどういう順番で作れば良いんだろう。と思った方は「レイアウトデザインの教科書 p24」を。以下の資料もおすすめです
実装のロードマップと教材
…
…
…！！😲
まだ残ってたんですね…
つまり、自分で実装までやりたい方ということですね…
やりましょう！！
僕も実装大好きです🙌
コードの記述無しでも実用的なwebページの作成が可能になりました。昔からあるものですとWix、最近だとSTUDIOや Webflow、WordpressのGutenbergエディタが使用されます。ロードマップAはデザイナーがコーディングのスキルを習得せずwebページの実現を目指すものです。フリーで動きたい、コーディング習得に時間をかけたくないという方に向いています。
ロードマップBではHTMLとCSSを学び２つに分岐します。HTML, CSSが書ければあとはエンジニアが担当するというケースも少なくないので一つのゴールです。追加でjavascriptを学習すると動きのあるwebページが実現できます。
次からエンジニアの領域に入ります。時間のある方、差別化を図りたい方のみ挑戦してください。
2022/09/02追記
コーディングを勉強される方に向けて別途記事を書きました。
よろしければこちらをご覧ください。
ロードマップB-αはWordpressを利用します。ご存じの方も多いと思いますが世界中で最も使用されているweb構築システムです。母数が大きく有利であるため、転職を考えている方はこちらに進むのが良いかもしれません。
ロードマップB-βは今後主流になるシステムに挑戦していくものです。表示速度、保守・セキュリティ性が高いという利点から導入が進んでいます。javascriptだけで進めるというのも大きなメリットです。
きちんとデザインができれば入れる企業もありますが、フリーや少人数での活動となると必ず実装が必要です。また、場合によってはコーディングが入社の必須条件ということもあります。
自分のゴールはどこなのかを考え適切なロードマップを選んでください。
ロードマップA
STUDIOとWebflowは似たサービスで、Webブラウザだけでサイトが作れます。どちらも公式のリソースがおすすめです。
webflowのほうが多機能なのですが日本語対応しておらず、また使いやすさからSTUDIOを使用するのがよいかもしれません。
最新のWordpress Gutenbergも似たような操作でサイトの構築ができるようになりました。
以下の書籍でコード無しのサイト構築方法が学べます。
ロードマップB
基本的なゴールはデザインカンプ通りにHTML,CSSが組めるようになることです。任意でjavascript、更に任意でWordpressかVue.js(Nuxt.js)に触れていきます。
プログラミングが初めての場合はプロゲートがおすすめです。色々と用意せず、すぐにコーディングを学ぶことができます。僕も昔プロゲートからプログラミングをはじめました。
終わったら同じレベル感のこちらの書籍に取り組みましょう。今度は実際のデータを用意して1から自分の手でサイトを作ります。
次は少しレベルアップしてこちらです。エビスコムさんの書籍は昔から有名でこちらも高い評価を得ています。ここまでで作成~公開までの使えるWeb知識が身についているはずです。
最後にこのシリーズを通して仕上げをしましょう！こちらは「デザインカンプを用意してどのように考えてコーディングするか」といった観点から進んでいきます。実際のコーディング作業が体得できるので最後の教材にうってつけです！
お疲れさまでした。
ここが基本のゴールです。
これより先は難易度が上がるため、無理してやる必要はありません。
…
でも、サイトに動きつけたいですか…？
javascriptやりましょう！
javascriptもプロゲート、習熟度向上のため短時間動画で学べるドットインストールに取り組みましょう。
ロードマップには載せませんでしたが、こちらの本を手元においておくと欲しいコードがすぐ見つかるので良いです。
それではラストに、WordpressとNuxt.jsについてお伝えします。
その前に一つ考えていただきたいことがあるのですがなぜWordpressが必要なのでしょうか？
HTMLとCSS, JavaScriptがあればWebサイトは作れます。
そのため、通常のWebサイトであれば必要はありません。現に、多くのサイトがHTMLとCSS, JavaScriptだけで作成されています。
この問いの答えは、更新作業をやりやすくするためです。
例えばnoteで記事を投稿する際、ページはHTMLとCSSでできているはずですが僕たちがコードを書くことはありません。
つまりこのような投稿や、ブログを更新するといった作業をコード書かずに楽に行うことこそ、Wordpress導入の目的というわけです。企業のサイトだと「おしらせ」欄などに利用されています。
これをCMS(コンテンツ・マネジメント・システム）といいます。Wordpressがいい感じに文章、画像等のデータを管理・処理してWebページを作ってくれているんですね。
なので、この先の学習はサーバーやOSなど専門的な知識が多くなります。
フリーランスや実装までできるWeb制作者を目指すのであれば良いのですが、無理をしてやるべき分野ではありません。
「それでもやってみたい」という方もいらっしゃると思いますためオススメの文献を紹介して本記事を終了にいたします。
Wordpressを自分でカスタマイズしたい方は
に取り組みましょう。
WordpressはJavaScriptとはまた違うPHPという言語で書かれています。はじめにPHPを学び、その後１からテーマを作成するレッスンブックへと進むルートがおすすめです。
Vue.jsはjavascriptのフレームワーク（javascriptを集め使いやすくパーツ化したもの）です。これをさらに便利にしたライブラリがNuxt.jsとなっています。
つまりHTML,CMS,javascriptの集まりなのですが…これだけだとWordpressのようなことができませんね。
そのため、記事を管理するシステムは別に用意して必要に応じてNuxtから記事の内容を引っ張ってきます。このシステムをWordpressなどのCMSに対して、HeadlessCMSと呼びます。
WordpressはHTMLもCSSもデータ管理も！というシステムだったのに対し、
「HTML,CSS,javascriptはNuxtで〜、その他のデータ管理だけはやるよ！」
ということで「HTMLやCSSなどの見える部分、頭がないCMS」からHeadlessCMSという名前になったんですね。
このHeadlessCMSは基本的にサービスとして提供されているので、Wordpressと比較してシステム構築などの必要がなく使いやすいというメリットを持ちます。
Nuxt.jsも結局はjavascirptの集合であるため、「javascriptさえできればほとんど全て実装できる」というのがこの「JavaScriptフレームワーク＋HeadlessCMS」のウリです。
詳しくは「Nuxt.js Wordpress 比較」などで検索していただくとより理解が深まると思います。
上記がVue.js, Nuxt.jsのオススメの文献です。
さらには公式ドキュメント、追加の検索など、学ぶには相当な労力がいると思いますがそれに見合ったパフォーマンスが得られます。
Wordpressとは比べ物にならないほどの開発の容易さ、ページの表示速度などが実現可能です。
いつか、余裕が出たら挑戦してみてください。
終わりに
出し切りました…
上記のロードマップを参考に学習を進めていただければ、デザイン、実装共に実用レベルまで到達できるはずです。
デザインの勉強を初めた時、結局なにをどこまでやればよいのかわからず教材の選定にたくさんの時間を費やしました。
合わない教材もたくさんあり、挫け、それでもなんとかデザインがしたいと必死に新しい教材にしがみついていました。
僕のようになることなく、Webデザインに挑む方の悩む時間や挫折を少しでも取り除きたいと考えたことが、本記事を書いた理由です。
この記事が少しでもみなさんのお役に立てばとっても嬉しいです！
それでは、少々長い記事でしたがこれにて終了です！
お互いWebデザイン頑張っていきましょうね！🙌
最後に、
これからデザインに取り組むみなさんを、力いっぱい応援してます！
この記事が気に入ったらサポートをしてみませんか？