Fire Engineering

化学の研究者→消防士→ITエンジニア(2016年11月〜)

ノンプログラマが1週間でポートフォリオを作ってみた

 今回は、プログラミング歴約3ヶ月程度の私が、自身のポートフォリオサイトを作成したときの開発記録です。プログラミングを勉強すると初心者でもこんなことができるんだ!などと刺激になれば幸いです。

ポートフォリオってなに?

 英語でPortfolio(ポートフォリオ)とは、直訳すると「紙ばさみ」や「書類入れ」という意味です。ポートフォリオという言葉は、その言葉が使われる業界によって意味が異なってくるのですが、クリエイター系の業界では、自分のこれまでの実績をアピールするための作品集のことを指します。つまり、自分の能力を対外的に誇示するためのものです。最近では、これをWeb上で公開するポートフォリオサイト(Webポートフォリオ)が広く用いられています。ポートフォリオは自分の作品を見せる場ですが、掲載される作品だけでなく、ポートフォリオ自体のクオリティーも評価の対象となるようです。確かに、魅力的なポートフォリオサイトを作成するためには、HTML、CSSJavaScript、(場合によっては、illustratorPhotoshop)などのスキルが必要であるため、ポートフォリオ自体も一つの作品ということになりますね。

なにを作ったか

Hirotsuru’s Portfolio f:id:hirotsuru314:20160424171229p:plain

なぜ作ったか

 今回、勉強の一環として、また、今後作成していくWebアプリケーションの公開の場として使うため、ポートフォリオを作成してみました。個人レベルでWebアプリケーションを実際に作っていく中で、最低限フロントエンドの知識も必要だなーって実感したので、HTML、CSSあたりの勉強をするために、一度純粋なWebサイトを作ってみようと考えました。Railsなどフレームワークを用いても、結局ビューの部分は自分で書かないといけないので必要不可欠な知識・技術だと思いました。

開発メモ

(作成過程で感じたことや苦労したポイントなど特筆したいことを箇条書きで書いていきます。)

レスポンシブWebデザインって難しい!

 レスポンシブデザインでWebサイトを作成するのって本当に難しいなって実感しました。ちなみにレスポンシブデザインっていうのはは、PC、タブレットスマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法のことです。イメージとしてはこんな感じです。

f:id:hirotsuru314:20160424171709p:plain

ASCⅡ.jp:レスポンシブWEBデザインとはより抜粋)

 ポートフォリオ作成の多くの時間はここにもっていかれました。それでも結局全然レスポンシブになっていません。今回は、一応、メディアクエリを利用して、2カ所にブレイクポイントを作りました。実際にブラウザの画面を小さくしていくと、Profile画面のコンテンツが縦に並ぶようになっています。しかし、画面サイズによってはまだまだレイアウトがくずれてしまいます。

 さらにスマホなどへの対応のため、本来はviewportを用いて、端末ごとのサイズに応じてフレキシブルに表示をしたいのですが、まだそこまでできていません。まぁレスポンシブデザインって、それだけで本が一冊できるぐらいだから、プログラミング歴が浅い自分がいきなり対応できなくてもしょうがないかなってことで、これは今後の課題として、時間をかけて勉強していきたいと思います。

WordPressやBootstrapをあえて使わない。

 今回はあえてWordPressなどのCMSは使いませんでした。また、Bootstrapも使いませんでした。理由は、純粋にHTML、CSSの技術を向上させたかったからです。まず、WordPressに関しては、場合によってはコードを書かずにデザインの整ったWebサイトが作れますし、私もときどき使いますが、今回の主旨に反するので、使いませんでした。Bootstrapに関しては、少ないコードで高速にデザインを整えることができる優れものですが、今回は使いませんでした。そのおかげで、Bootstrapのありがたみや便利さを感じられたので、よかったです。Bootstrapのグリッドシステムなんて、クラス名を指定するだけで簡単にグリッドレイアウトを作成することができるから本当に便利だなーって思いました。ただ、Bootstrapをあえて使わないことで、面倒なfloatの設定を自分で行ったりしないといけないので、学ぶべきことはたくさんありました。

更新(2016年6月9日)

後に、下記の記事でBootstrapを導入しました。

Bootstrapのグリッドシステムとサムネイルを使ってデザインを整える

スマホで勝手にフォントサイズが大きくなる問題

 今回作ったポートフォリオサイトをスマホで見てみると意図せず部分的にフォントサイズが大きくなるという不具合が生じ、かなり悩まされました。しかし、ググってみるとよくあるみたいで、CSS

body {
    -webkit-text-size-adjust: 100%;
}

と記述すると解決されました。このプロパティがデフォルトではautoになっていて、文字が自動的に調整されていたみたいです。マルチデバイスに対応するのってほんとに難しいですね。今回は、Chrome, Safari, IEでしか動作確認していませんが、他のブラウザや端末への対応も勉強したいと思います。

背景に写真を使う

 デザインのセンスがない私がどうしたら見た目がよく見えるのかなーって思っていろいろ試してみたところ、ここに行き着きました。背景にbackground-imageで写真を入れるとあんまりデザインを考えなくても見た目がそれなりになるような気がします。また、写真にぼかしをかけるなどの加工をしても味がでるので、デザインとしてけっこう使えます。

今後やること

Worksの追加

 現時点ではポートフォリオのメインコンテンツとなるWorksの部分がまだ掲載できていません。これに関しては、今作成中のWebアプリケーションが二つほどあるので、できるだけ早く公開したいと思います!

レスポンシブWebデザインにする

 レスポンシブWebデザインを作ろうとして感じたことは、レスポンシブにするためにはページデザインの段階からある程度、そのことを想定したデザインにする必要があるということです。その点が今回はできていなかったので、また作り直したいと思います。

jQueryを使ってリッチなUIを実現する

 今回は、ページ内リンクのところだけjQueryを使っています。これから、JavaScriptjQueryの勉強のためにもポートフォリオサイトにいろいろ導入してみたいと思います!

Contactフォームを作る

 Contactフォームを作成して、サイトから私に直接メッセージを送れるようにしようと思っています。その部分はRubyで実装しようかなって思っています。

おわりに

 今回ポートフォリオを作ってみて一番感じたことは、よく言われていることではありますが、プログラミングの勉強は実際に何か作りたいものを作る(コードをガンガン書く)ことで、一気に成長するということです。ポートフォリオを作る前、私はHTML・CSSの参考書を2冊くらいやっていたので、「静的なサイトを作るくらいなら簡単でしょ。」っていう感じで始めたのですが、まあーうまくいかない。でも一番成長する時ってうまくいかなくてトライアンドエラーを繰り返すときだって本当に実感しました。最近の参考書では「作りながら学ぶ」系の本も多いし、それはそれで勉強になりますが、結局本に書いてあるコードを丸写しすることになるので、ある程度基本文法がわかるようになった段階で、自分の作りたいものを決め、ゼロから自由に作ってみるのが一番成長への近道かと思います!  今回作成したポートフォリオサイトは、これからどんどんクオリティーあげていこうと思っていますので、何か機能を追加できたら、また記事を書きたいと思います。あと、細かい技術的なことも書けたらいいなと思ってますので、またよろしくお願いします!

更新

2016-04-27 Google Web Fontsを使ってみた。
2016-05-03 経験ゼロのド素人がWebアプリケーションを作ってみた
2016-06-09 Bootstrapのグリッドシステムとサムネイルを使ってデザインを整える