#9 web制作の勉強を始めて2週間で自分のサイトを作った方法

progate学習記録
この記事は約8分で読めます。
スポンサーリンク

web制作の勉強を記録している当ブログ管理人。

今回は、勉強した成果物として自分のポートフォリオサイトを作ってみたので、実際にサイトを公開するまでにどのようにして勉強していったかを紹介します。

実際に作成したサイトはこちらから見ることができます。

web制作の勉強を始めようと思っている方は、この記事を読むことで2週間で1からwebサイトを構築し、公開するまでの道順を知ることができるでしょう。

具体的には

  • 勉強方法と流れ
  • 自分のwebページを公開する方法
  • 画像の素材サイト
  • 画像編集に便利なwebサービス

の4点にフォーカスして説明していきます。

これまでの勉強記録はこちらにまとめてありますので、気になった方は読んでいただけると嬉しいです。

2週間で自分のサイトを構築する勉強方法

私は2020/01/20にweb制作の勉強を開始し、2020/01/31に自分のサイトを完成させました。

勉強しながら自分のサイトをこまめに作成していったわけではなく、一通り勉強してから作業に入りました。

したがって、実際の勉強時間は10日ほどです。

ではこの10日間の勉強はどのようにして行ったか。

結論を先に言うと、「progateしか使っていません」。

初心者がするべき効率の良い学習方法は
1.progateでインプット
2.オリジナルの作品を作ってアウトプット

初心者はprogateで学ぶべき

progateとは、オンラインでコーディングが学習可能なwebサービス。

progateの利点は

  • サクサク進む
  • 環境構築が必要ない
  • 基礎知識が学べる
  • 安い

と言うこと。

プログラミングの勉強をしたことがある方ならわかると思いますが、大抵の入門書は長々としていて読むだけ一苦労。

参考書に沿ってプログラミングをしても、模写をすることがメインとなってしまいなかなか身につきづらいです。

しかしprogateならばゲーム感覚でサクサクと進めることができるので、勉強自体が苦になりづらいように感じました。

progateは基礎部分は無料、その他のコースは月額1000円で全て受けることができ流ので参考書に比べてお金をかけずに学ぶことが可能です。

プログラミングの勉強が続かなかったと言う人や、尻込みをしていてまだプログラミングに触れていない方はprogateの無料コースを試すことをお勧めします。

progateの落とし穴

しかし、progateは完璧とはいえません。

それは「例の少なさ」と「親切すぎるガイド」です。

progateでは

  • スライドでこれからやる内容を勉強
  • 指示に従ってプログラミングを書いてみる

と言う内容で一つのステップとなっています。

スライドで覚えた内容を指示に従ってプログラミングするのでとても簡単で達成感を味わえますが、その反面自分のスキルとして定着させることが難しいように思います。

そこで私がやった勉強法は「progateのコース終了ごとに学んだ内容を生かして自分でwebページを作る」と言うもの。

これによって学んだ内容をアウトプットすることができ、効率的に勉強することが可能です。

もちろん最初からスラスラと書けるはずもないので、インターネットで調べたりprogateのスライドを見返したりしながら1つの作品を作成します。

作品というとハードルが高そうですが、そのコースで学んだ内容を自分で再現するだけでOK。

実際の私の毎回のアウトプットはこちらからみることができるので、「こんなもんでいいのか」と安心すると思います。

2週間で自分のサイトを公開するには、

  • progateによる簡単な勉強
  • 勉強を生かしたアウトプット作成

この2点を継続して行っていけば大丈夫です。

自分の作成したwebページを公開する方法

先ほどは、「毎回勉強した内容を踏まえたアウトプットを作成するのが大切だ。」とお伝えしました。

せっかくなら作成したアウトプットを公開してツイッター等のSNSなどで勉強の進捗を報告しましょう。

作ったwebページを公開して進捗報告をしよう
モチベーション維持&自分の記録としてとても有益!

SNSからの反応によってモチベーションが上がりますし、良いアドバイスをしてもらえることもあります。

ここではgithubというサービスを使ってwebページを公開する方法を解説します。

githubでwebページを公開

githubとは世界中の人が自分で作ったプログラムを公開して利用してもらうためのプラットフォームとして利用されたり、企業などで複数人でシステムを開発するときの共同のワークスペースとして利用されるサービスです。

サービスといいつつ無料でwebページを公開できるのでお金はかかりません。

githubでwebページを公開する手順は以下の通り

  • githubにアクセス リポジトリを作成
  • リポジトリに作ったコードなどをアップロード
  • 設定からgithubページを有効にする

githubにアクセス リポジトリを作成

githubのページにアクセスし、アカウントを作成/ログインします。

このとき、ユーザーネームは公開したページのURLに使われるので本名などは避けましょう。

その後、右上の「+」というところから「New Repository」を押すだけ。簡単!

押すとリポジトリの名前の入力を求められるので、「work1」とか適当な名前をつけましょう。

そのあとは「create repository」をクリックして作成は完了

作ったコードをアップロード

作ったコードをアップロードする前にやることがありました。

それはREADMEの作成です。

READMEとはリポジトリに対する説明書のようなもの。

説明書を書く必要はないのですが、空のREADMEを置いておく必要があります。

赤丸で囲ったREADMEをクリックし、移動したページで下にスクロールして作成ボタンを押すだけでOKです。中身を書く必要はありません。

その後、ページが切り替わると下のような画面になっていると思うので「Upload files」をクリックします。

自分が作成したwebページに必要なもの一式をアップロードしましょう。

githubページを有効にする

準備はもう完了といってもいいでしょう。

最後の仕上げにgithubページという機能を有効化すれば、作成したページをインターネット経由でみることができるようになります。

まず「Setting」タブを開きます

その後、下にスクロールすると「Github Page」という項目があります。

ここで「Select source」を「master branch」に設定すれば、あなたの作成したwebページのリンクが生成されます。

このリンクを共有すれば誰にでも作成したページを見せることが可能!

※githubにアップロードしてすぐの時は反映に時間がかかるので気長に待ちましょう

このようにして自分のアウトプットを共有し、モチベーション維持につなげてください!

画像の素材サイト

ここからはweb制作の勉強に役立ったな という画像サイトを紹介。

webページに載せる画像だけでなく、アイコンや背景など勉強中でも画像を扱うことが多いweb制作。

効率よく画像を探して勉強のスピードをアップさせましょう!

モノクロアイコンがフリーのICOOON MONO

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

ICOOON MONOというサイトでは、モノクロのアイコンが商用利用可で無料で利用することができます。

アイコンの種類も豊富で、アイコン画像がない!という時はここをみておけば安心です

可愛いイラスト画像がフリーのFLAT ICON DESIGN

FLAT ICON DESIGN -フラットアイコンデザイン-
フラットデザインに最適!WEBサイトやDTPですぐ使える商用利用可能なフラットアイコン素材がフリー(無料)ダウンロードできるサイト『FLAT ICON DESIGN』

FLAT ICON DESIGNというサイトでは様々なイラストの可愛い画像がフリーで使えます。

こちらも商用利用可能。

フリーとは思えないクオリティで、こちらも頻繁に利用させていただきました。

写真のフリー素材が豊富なPixabay

Attention Required! | Cloudflare

こちらはブロガーさんもよく使っているサイトです。

クオリティの高い画像が無料で利用可能なので、どんどん利用しちゃいましょう。

高サイズの画像になると会員登録が必要ですが、普通の大きさなら会員登録なしで使うことができておすすめ。

とりあえずの画像がすぐ手に入る placehold

Placehold.jp | 簡単!ダミー画像作成
簡単!ダミー画像生成、モックアップ用画像作成ツール。文字やサイズ、メモを入れた仮の画像を簡単に作成できます。

こちらのサイトは、「とりあえず画像を表示しておきたい」というのにとても便利。

「https://placehold.jp/幅x高さ.png」と入力して検索するとその幅と高さの画像が取得できます。

このアドレスをそのままimgタグのsrcに指定すればすぐに画像を表示することができます。

画像編集に便利なwebサービス

画像が手に入っても、自分が思った通りのサイズや比率でないことがありますよね。

そんな時にいちいち画像編集ソフトを立ち上げるのも面倒。

そんな方にオススメしたいのがweb上で画像編集を完結させることができるPixlrです

オンライン画像編集ソフト - Pixlr.com
無料オンライン画像編集ソフトをぜひご利用下さい!エフェクト、フィルタ、オーバーレイ、他にも簡単に使える高機能が満載。あなただけのPixlrです!

無料で利用が可能で、画像のサイズ変更や切り取り、背景の追加など一通りのことが可能。

pngでも出力できるので透明な画像も扱えます。

効率がかなり上がると思うのでぜひ使ってみてくださいね

まとめ

今回の記事では私が実際に2週間の勉強で自分のサイトを作った際の方法・便利なサービスを紹介しました。

勉強は「簡単に学んで」「アウトプット」が大切。

また、便利なサービスを使って作成を効率的に行うことで集中的に勉強ができます。

たくさんの初心者さんはやる気に満ち溢れてとても素晴らしいですが、大きなことをしようという意識が強いように思います。

参考書をいきなり買ったり、大金を払ってスクールに通うのも近道かもしれません。

しかし、肩の力を抜いてコツコツと続けていく方法も確実に成長が望めます。

皆さんもprogateなど簡単な教材から取り組んでみてはいかがでしょうか。

私自身、これからもweb制作の勉強を続けていきますので一緒に頑張っていきましょう!

コメント

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