この記事は、プログラミング初心者の私がポートフォリオを公開するまでの実録を、実際につまづいたポイントと共に紹介します。
ポートフォリオの実物が見たい、ソースコードだけ見たいという方は下記からご覧になってください。
- Kamimi's Portfolio
- ソースコード(Githubへ)
実物
記事の概要
どんな人向けの記事か
- 言語を学び始めたばかり
- HTML/CSSは書いたことがある
- 初めて自分でWebサイトを公開する
- 全て無料でやりたい
実際のコーディングについての詳細などは紹介していません。
代わりに参考になったリンクを載せています。
(個人的な履歴管理のためGithubを使っていますが、Githubを使わないと公開できない訳ではありません。)
記事の目次
公開するまでの手順 (約27時間)
1. デザイン検討 (約7時間)
2. コンテンツ検討、データ準備 (約1時間)
3. コーディング (約17時間)
4. Webサイトの公開 (約2時間)
やってみての感想
公開するまでの手順 (約27時間)
1. デザイン検討 (約3時間)
最初の困った...
どうしたら良い感じのデザインになるんだ...
デザインはITに関わらず触れたことがありません..
けど今回は初めて公開するサイト。デザイナーさんが作るような複雑な動きやイラストはできずとも、それなりにモダンでシンプルなものにしたいと思いました。
実際にやったこと
で実際にどう考えたのかですが、主には下記の3つです
1.他の人のサイトを見る
これでWebサイトのレイアウトのイメージを掴みました
「ポートフォリオ」で検索するとわかりますが、
多くのサイトは、1ページで完結し縦に長いサイト(シングルページ)で作られています。
スマホとの相性が良いなどユーザーにとってのメリットが多いのでしょうが、今回の私にとっては、たくさんのhtmlファイル、cssファイルを用意する必要がないし、複数のページを用意するほどのコンテンツもないしということで、シングルページを採用しました。
下記を参考にしながら、具体的なレイアウトを決めました。
- 実際のエンジニア・デザイナーのポートフォリオ
- 書籍「デザイン入門教室」(Amazonへ)
書籍は、Webサイトに限らず様々なデザインを取り扱っていて、デザインの基本を知るという意味でも勉強になったので、私の中の良書の1つになりました。
2.配色の紹介サイトを見る
これでWebサイトに使う色を決めました
下記のサイトから、自分が好きな配色を選び、その色だけをWebサイト内で使うようにしました。
https://www.canva.com/ja_jp/learn/100-color-combinations/
自分好みの配色を作ってくれるサイトも試したのですが、正直サイトの使い方がよくわからず(多分私の理解力の問題..)、諦めました..
上記のサイトは、配色のイメージと共に、カラーコードも載せてくれているのでその点便利でした。
3.モックアップの作成
これで完成形とそっくりの見た目のWebサイトの模型を作ります
プレゼン資料を作るような感覚で、オブジェクトを配置していけば完成します。
実は当初モックアップを作る予定はなく、既にコーディングを始めていたのですが、どうも進みが悪かったのです。少しずつコーディングしながらデザインを決めようとしていたのでそれは当然の結果かもしれません。
やっているうちになんかここはこれとのバランスが悪いからやっぱり違うオブジェクトを使おう、となることが多かったのです。
そこでコーディングしながらというのは辞めて、簡単なものでも良いからモックアップを先に作ってそれをガイドにしようと思いました。
やったこととしては2つ
- 紙にざっくりとレイアウトやオブジェクトの形を書く
- その後pptxで作っていきました。
です
業務で実際にモックアップを作成している人たちは、SketchやAdobeXDといった専用のツールを使うのが多分普通なんでしょうが、使ったことがなかったし、pptx(もちろんkeynoteでも)の機能で十分作成できそうなデザインだったため使いませんでした。
2. コンテンツ検討、アイコン/画像準備 (約1時間)
デザイン検討の時と同様、Pinterestや他の人のサイトを見て、決めました。
多くのポートフォリオの構成は下記のようになっている印象でした。
- 自己紹介
- 自分のスキルや経験
- 成果物(今まで作ったもの)
- 連絡先
内容もよくあるものだったので、そんなに悩まずに書きました。
ただ今回、成果物のところはまだダミーが入っています。
アイコンは、Font Awesomeを使うことにしました。利用方法はここでは説明しませんが、HTMLファイルに一行かけばすぐ使えるようになります。
proと書かれているアイコンは有料プランに登録しないと使えませんので、proではないものを使います。
そして次の画像準備で、当初想像していなかったつまづきがありました。
2番目の困った..
表示に必要な良い感じの画像がない..
私が今回表示したい画像は2つでした。
- トップに表示する画像
- 自己紹介で載せる画像
みなさんシングルページという部分は変わらずとも、画像は何かしらの個性を出していることが多いです。
できる方であれば、PhotoShopやIllustratorを使っていい感じのデザインで作ったりしています。
ただ私はそのようなツールは使えません。そして自己紹介に自分の写真を載せたくない..(というか普段写真を撮らないので、車の免許証とかにある証明写真くらいしかなかったんです。本当に)
なんとか自分で撮った数少ない写真の中から良さそうなものを選び、ツールなしで良い感じにできないか検討しました。
まずトップの画像に関してですが、
HTMLタグのimgタグを使えば、限られているながらもCSSで写真の加工ができることがわかりました。
デザイナーさんが気合い入れて作ったものとは遠いかもしれないですが、それなりに加工が可能とわかりました。
参考：https://iholdings.jp/archives/2917
と説明しておきながらなんですが、今回はgrayscaleを使ってみただけなので、加工なしの写真とそんな変わりません..
次にプロフィール画像ですが、職場でこんなツールを紹介してもらいました。
どちらも製作者は、sato_neetさんという方です。
自分の写真をアップロードすれば、オリジナルの自分っぽい画像が出来上がります。私みたいに証明写真しか持ってない人でもいい感じに仕上がるはずです!
大変感謝です。
もちろん、他にも写真加工ツールはあると思いますし、イラストレーターさんに依頼する方法もありましたが、今回は早く公開したかった、全て無料でやりたかった、ちょうどタイムリーにこのツールを紹介いただいたので、上記を使いました。
3. コーディング (約17時間)
やっとコーディングし始めます。
ここまで長かった..
あとはひたすら、作ったモックアップの通りになるようにコーディングしていきます。ブラウザのDeveloper Toolを使い、実際の画面を確認しながら進めました。
スマホの時代なのでスマホ/PCどちらも画面にも対応できるよう、レスポンシブ対応もしました。初めて使うメディアクエリに四苦八苦しながらなんとか進めました。モックアップはPC用しか作ってなかったんですが、そこはなしで頑張りました。
言語やライブラリ、フレームワークは定番の以下を使いました。
- HTML
- CSS
- Bootstrap
- jQuery
また使ったエディタは以下です。
必要そうだと思った拡張機能を入れながら使いました。もちろん全く入れなくても使えますが、使った方がコードが見やすくて便利です。
- Visual Studio Code
4. Webサイトの公開 (約2時間)
最後に、Webサイトを公開します。
この作業をすると、誰でもある決められたURLにアクセスすれば、作ったサイトを見ることができます。
「ホームページ 公開」と検索すると、独自ドメイン、レンタルサーバーなどなど用意するものが複数あるようです。今回はとりあえず早く公開したかったので、個人的に最も楽にできそうだと思ったFirebaseの無料プランのHostingを使って公開することにしました。
ドットインストールのFirebaseの講座がかなり参考になりました。補足情報を参考にしながら、動画の通りに迷うことなくできました。
このオンライン講座は無料の講座が多く紹介されています。上のリンクの講座も無料です。
この動画の方法だと自分の好きなURLにすることはできない(独自ドメインは取得しない)のですが、今回はとりあえず公開できればよかったし、何より全て無料でやりたかったので取得はしませんでした。
やってみての感想
コーディングはもちろんわからないことだらけで一番時間がかかったのですが、
このデザインを実現する、という目標が明確なのでストレスなく進められました。
それよりもデザインや画像の準備が個人的には結構負担でした..
何が正解なのか、どこまで凝ったら良いのかがわからず..
今回はかける時間は特に決めていませんでしたが、時間で区切るというのは一つの手だったかなと思います。
また長くなるのでここには記載していませんが、改善点・反省点をGithubにメモったので、諸々改善していきたいです。
まずは多言語化(英語対応)をしたいと思ってます。
あと今更ですが、各手順の横にかかった時間を記載しています。
合計で27時間でした！
仕事の合間に進めたので、作業期間としては1週間くらいですね。
今回は自分の成果物を作ってみることを目標にしていたので、ユーザー目線でこうした方が良い・今後の保守を考えて..などなど改善すべきことも多いのですが、
これからポートフォリオを作ろうとしている人の参考に(&と自分の記録に)なれば幸いです。