プログラミングをするパンダ（@Panda_Program）と申します。自分はProgateでプログラミングを学んだ後、プログラマとして転職することができました。

この記事では、ある程度コードを学んだから自分でサイトを作ってみたい。だけど、やっぱりなんだか難しそうと考えている方のハードルを、横断歩道の白線レベルまでに下げることが目的です（この記事の文字数は5701文字です）。

対象者
・これからコードを学ぼうという方
・ProgateでHTML&CSSなどを学んで、合計レベル100を越えた方
・IT技術を利用して、自分で何かを作ってみたい方

こんな方はゴメンナサイ。この記事には以下のことは書いていません
・サイトのアクセス数の伸ばし方
・デザインにこだわったサイトの制作方法
・自作サイトのマネタイズの方法
・斬新なウェブサービスの作り方

以下目次です。

①HTML&CSSだけでWebサイトは作れる。目から鱗の視点を紹介します！
② サイトのコンテンツを考えるだけでOK。便利ツールでラクをしよう！
③作りたいけどアイデアがない。それなら、二つの単語を組み合わせよう！

①HTML&CSSだけでWebサイトは作れる。目から鱗の視点を紹介します！

プログラミングを始めた方は、こんなことを聞いたことがあると思います。

・プログラミング初心者は、まずHTMLとCSSがオススメ！
・HTML&CSSを学んだらウェブサイトが作れる！
・ただ、これだけではプログラミングがわかったとは言えないよ

実際にProgateで学んでみると、上記のことが理解できると思います。

自分のProgateのレベルが150を越えたころ、自分でもサイトを作ってみようと思いました。

ただ、学習と実践は大きく違いました。

ウェブサイトを作ろうとすると、考えるべきことがたくさんあります。ヘッダー、ボディ、フッターの内容、またサイトロゴや掲載する画像など、全部ゼロから決めて作るなんてとても大変だ、と二の足を踏んでいました。

それでもまずは、ProgateのHTML&CSS中級編の完成目標サイトを分析しようと思い、コードをダウンロードしてローカル環境でサイトを表示してみました。

あれ？うまく表示されてない。バグかな？

そうか、headタグ内でCSSが読み込まれてないんだ。

ん？

よく見ると...

これ、文字と画像だけだ！

文字と画像だけなら、自分の伝えたいことをちょっと書いて画像を載せたら自分にも一つのサイトが作れる！

これに気付くまでは、「サイトを作ること」＝「HTMLのコードを書くこと」と思っていました。

意外なことに、サイト制作の第一歩は「文字を書くこと」だったんです。素晴らしいコードを書くことではないんです。これなら、本質的にはブログの記事を書くことと同じです。

そして、この気づきこそが自分がサイトを作って公開する原動力になったのです。

（本来ならこのように表示される）

CSSは「HTMLの見せ方」を決めるものという頭では理解していた言葉が、ここでやっと腑に落ちました。

文字の大きさを変えたり、書体を選んだり、背景画像などを使うのは、「自分が伝えたいことを見やすく、またカッコよく見せるため」だけです。

１つ目のサイトを作るにあたり、まずはどんな文字をサイトに載せるのかを考えてみましょう！画像はフリー素材を検索すれば自然と集まります！

マインドセット①：サイト制作では、公開するのは文字と画像である！

② サイトのコンテンツを考えるだけでOK。便利ツールでラクをしよう！

次はレイアウトのハードルと、掲載する画像のハードルを下げたいと思います。

レイアウトはマウスで組み立てる！オートコーディングツールを使ってみよう

公開するのは文字と画像だけと言っても、ゼロからHTMLとCSSを書くのは大変です。

レイアウトや画像はどうしようかなと考えていると、noteでこんな記事を見つけました。

LP特化のWebページ作成ツール「Pingendo」がとにかく凄い。（世永玲生）

Pingendoとは、オートコーディングツールのことです！

使い方は上記記事をご覧いただくとして、これのすごいところを３行で説明すると以下の通りです。

・UIの部品をドラッグ&ドロップするだけでレイアウトが作れる
・リアルタイムでHTMLコードが書かれていく
・個人利用の場合、料金は無料

使ってみると、簡単にオシャレなレイアウトが出来上がっていき、とてもワクワクしました！自分の最初のサイトもこのツールを使って作りました。

実際に見てみましょう。

操作画面です

パーツを選んでドラッグ＆ドロップすると...

レイアウト構成とコーディングが完了！

オートコーディングツールはPingendoの他にも、Adobe製のAdobe museなどいくつか種類があるようです。

このように簡単にサイトのレイアウトを作ることができる反面、ゼロから作らないと自分で作ったことにはならないんじゃないか、という人もいると思います。

ただ、この記事の目的は「まず１つ目のサイトを作っていたい人のハードルを下げる」ことなので、使える便利ツールはどんどん使うことがベストだと考えています。

また、もともとあるツールやライブラリを探してラクするのが、デキるエンジニアの条件でもあると自分は考えています（さらにデキるエンジニアは、このようなツールやライブラリを作ったり、そのコードの中身を読める人です）。

Pingendoである程度形をレイアウトを作った後で、ちょっと見出しのサイズを変えたい、既存パーツのレイアウトを変更したい、というような時にHTML&CSSの知識が役立ちます！

各パーツはリアルタイムでコードに反映されるので、HTMLを直接書き換えたり、CSS/SCSSファイルに変更を加えることで、自分好みのレイアウトにアレンジすることができます！

これはHTMLやCSSの知識がある人にしかできません。自分が思うようなアレンジを加えられたら、「初心者だけどHTMLとCSSは使える！」と判断してOKです。

次にサイトの画像に使えるツールを紹介します。

もう画像で迷わない！無料で使えるcanvaが素晴らしすぎる

せっかくサイトを作るならオシャレな画像を掲載して、スタイリッシュなサイトを作りたいと思いました。

でも自分にはセンスがない、と思う方も多いと思います。自分もインスタ映えするような写真を撮ったり加工することはできません。

そこで、canvaというサービスをご紹介します！実はこの記事のトップ画像もcanvaのものを利用しています。

このサービスのいいところは以下の通りです。

・場面ごとのテンプレートが豊富で無料！
・文章に合うデザインが必ず見つかる
・デザインがとってもオシャレで使い方も簡単！

今回は記事のサムネイル画像が必要だったので、canvaに掲載されている画像をダウンロードしただけです。必要であれば、文字を記入したり、画像にフィルターをかけたりと、様々な加工が簡単にできます！

オシャレな画像があるだけで、なんだかすごいものに見えます。なんでもいいので１枚画像を作ってみて、自分が作ったんだと周りの人に見せると、とてもいい反応が返って来ると思います。

その反応が、ネットの向こう側の人と同じ反応なんです。ただ、身近な人には種明かししてあげましょう（笑）

自分も一枚個人で作ってみましたが、画像の加工自体は5分もかかりませんでした！

canvaの登録や利用方法は、下記記事が参考になると思います。

全てのエンジニアにおすすめしたい簡単にデザインができるデザインツール「Canva」のススメ

これでサイトのレイアウト構成を作ることと、サイトに掲載する画像を準備するハードルが下がったと思います！

レイアウトや画像は、補助的な役割でしかないんです。便利ツールを使いこなして補助的な部分はサッと片付け、コンテンツというサイトのキモに時間と労力を注ぎましょう！

マインドセット②：先人が作った便利ツールを大いに活用しよう！

③作りたいけどアイデアがない。なら、二つの単語を組み合わせよう！

最後に、何か作ってみたいけどアイデアがないという方のハードルを下げる方法を紹介します。

それは、自分の趣味や興味に関連するキーワードを二つ組み合わせる方法です！

一つの単語ではテーマがカバーする範囲が大きすぎます。ですが、もう一つの単語を組み合わせることで、カバーする対象がせばまります。あとはそのテーマで自分が欲しいものを作るだけです！

実際に自分が作ったサイトは、以下の単語の組み合わせで生まれました。

「ウィスキー」 × 「蒸留所の見学」

日本のウィスキー蒸留所を巡ろう 〜Japanese Whiskey Distilleries〜

自分はウィスキーが好きで、蒸留所の見学にも行きます。蒸留所の見学は公式サイトから予約できます。

ですが、見学予約ページにまでたどり着くには、トップページから何度もリンクをクリックしなければなず、とても煩雑でした。また、直前になると予約状況は頻繁に変わるため、何度かサイトをチェックしに行く必要がありました。

そこで、ワンクリックで予約ページに飛べるページが欲しい！と考えました。じゃあ、これをテーマにサイトを作ってみよう、と作るサイトのコンテンツを決めました。

サイトの文章は蒸留所の設立の経緯を紹介している、別のサイトの記事からの引用です。自分の趣味の知識も深まり、下調べをしている間もとても有意義でした。

もしこれが「誰かに使って欲しいページ」を作るとします。すると、作っている間に「誰か実際にみてくれるんだろうか。一人もいないんじゃないか」と疑心暗鬼になっていただろうと思います。

この点でも、まず１つ目のサイトを作るときは、自分の欲しいものを作ることがモチベーションの継続に繋がります。

また１つ目のサイトを作る際は、以下のことを意識してください。

「１サイトに１コンテンツ。機能は最小限に」

この記事の目的は、ゼロから何かを作る人、Progateの言葉を借りると「初心者から創れる人」が実際にサイトを制作するハードルを下げることです。

初心者なので、サイトは簡単なもので良いんです。仮に人から好意的な反応がなかったとしても、「１ヶ月前の自分ならこんなことできなかった。成長したな！」という感覚を得られれば、まずはそれで十分です。

シリコンバレーのスタートアップのようなサービスを考える必要はありません。まずは、アイデアを出して、それを自分で形にするところから初めてみましょう！

一つ形にしてみると、今まで見えなかったものが見えてきますよ。

マインドセット③：趣味や興味、身近なことをサイトのテーマにする！

初めてのサイト制作は自分との戦い

最後に、少し自分の話をして締めくくろうと思います。

１つ目のサイトを公開するまでには自分の中でハードルがたくさんありました。

初めは「エンジニアってすごいな。自分もこんなかっこいいサイトやサービスを作りたい！」という熱意からProgateでコードを学びました。

Progateでレベルアップするにつれ、今までできなかったことができていく。わからなかったコードの意味が理解できるようになる。これはとても楽しい時間でした。

Progateでのレベルが150を越えた頃、自分でもサイトを作ろうと思いました。が、レイアウト構成で苦手意識があったので、0から作ることはとてもハードルが高いと思い込んでいました。

そうして行動に移せないでいるうちに、「やっぱりサイト制作は難しいんじゃないか。自分にはできないんじゃないか」と、制作を諦めそうになりました。

そんな自分が、それでもサイトを作ることができたのは、どうにかしたいともがく中でここで紹介した見方を手に入れたからでした。

エンジニアは、自分の制作物こそが名刺そのものだと自分は思っています。そして初心者の壁を越えるためには、「自分で何か作れた！」という成果が必要だと思います。

そのようにして、今までプログラミングがわからなかった方が初心者になり、初心者から何かを作れるようになった結果、一人でも多くの方が一つでも多くのサイトやサービスを作ると、きっと面白い世の中になっていくと思います。

これを読んでくださったみなさんが、今まで溜めていたアイデアや、途中まで手をつけていたプロジェクトを公開させようと思うやる気が出たのであれば本望です。その後は、もう手を動かすだけです。

とりあえず、１つ形にしてみましょう！

以上、プログラミングをするパンダ（@Panda_Program）でした。