ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

オリジナルのギャラリーポートフォリオをつくってみた【Webデザイン】【Webコーディング】【JavaScript/jQury】

ポートフォリオ Webデザイン Webコーディング HTML CSS JavaScript Adobe Xd

記事にするのが遅くなりましたが、今年リニューアルしたポートフォリオの制作についてまとめてみました！

背景

筆者のこれまでのポートフォリオはこんな履歴でした↓

HugoテーマをNetlifyデプロイ(2019/1)

Hugoテーマ使用のポートフォリオ
Hugoテーマ使用のポートフォリオ

できたこと :

  • はじめてHugoをさわった
  • はじめてNetlifyでデプロイした
  • はじめてgitでバージョン管理した

できなかったこと :

  • コーディングは数カ所、代入する値を変える・増やすのみ
  • デザインはほぼデフォルト
  • ギャラリー・作品説明なし

Salon.ioカスタム(2019/7)

Salon.ioを使用したポートフォリオ
Salon.ioを使用したポートフォリオ

fuchsia-84.hatenablog.com

できたこと :

  • ギャラリーと作品説明のセットが作れた
  • カスタム時にコードを少し書いた
  • 作品説明ページに軽いコーディング

できなかったこと :

  • デザインは少しカスタム
  • 本格的にコーディングしていない
  • 掲載情報が十分でない
  • 模写とオリジナル制作をハッキリ区別できない

そこで、JavaScript/jQuery学習のアウトプットも兼ねて、

ギャラリー+作品説明ページのあるポートフォリオを
1からデザインしてコーディングする！

という目標ができました。

新ポートフォリオの機能と構成

トップページ

  • レスポンシブ
  • トップに大きくギャラリーがある
  • 模写・オリジナル・Web課題・ロゴ制作が分別できる
  • プロフィール・連絡先(メール※とSNS等)・ブログにアクセスできる
  • 画像クリックで作品詳細ページのウィンドウを出す

※メール、については安全性を考慮してNetlifyでデプロイしたお問い合わせページをかませる。

作品詳細ページ

  • レスポンシブ
  • モーダルウィンドウで表示
  • デザイン全体を画像表示
  • 更新日時(制作日)
  • 制作テーマ
  • 工夫点
  • その他、掲載したい情報
    • 実際のWebページへのリンク
    • ブログ記事へのリンク
    • XD共有へのリンク など

↑オリジナル制作・模写・ロゴ制作など、制作物の種類に応じて作品詳細ページの掲載内容が変化させる

プロフィールページ

  • レスポンシブ
  • モーダルウィンドウで表示
  • プロフィール情報
    • 顔写真
    • 名前
    • 学歴
    • 資格取得歴
    • 論文(卒論・修論・学会)

成果物

f:id:fuchsia-84:20210817191652p:plain

新ポートフォリオサイト

デザイン

PC版デザインカンプ(XDリンク)
※SP版はコーディング時に調整

工夫点 :

  • ユニバーサル配色で色覚に配慮
  • ギャラリーや説明を邪魔しないシンプルさ
  • フラットデザイン(英数字の軽めフォント+ボタンUIなど)
  • レスポンシブ対応(スマホ時のスタイル。掲載情報の維持)

コーディング

github.com

工夫点 :

  • JSON読込後、カテゴリ判別で作品詳細ページの内容の変更に対応
  • モーダルウィンドウの実装(プラグイン使用せず)
  • ダウンロード時のプログレス表示

参考 :

jQuery最高の教科書

jQuery最高の教科書

Amazon

こちらの書籍の第6章でのギャラリー制作、第7章のプログレス表示を参考に制作を進めました。

制作期間

2020年/6月〜9月 + 2021年/1月〜2月

↑空白期間は、色彩検定1級の勉強・受験期間

開発環境

動作確認

ブラウザ :

実機 :

今後・おわりに

このポートフォリオは以前から｢もっとこうだったらいいのにな｣｢こういう風につくれないかな｣とかなりの期間悩みつつ、でもまだ無理〜と離れていたものを、やっと｢作れるかも！｣と一山越えた手応えがあり、大きな一歩となる制作でした。
デザイン面では配色とフォント、コーディング面では主にJavaScriptとここ最近で学んだあらゆる分野を落とし込んで今の自分につくれる中で満足できるものがつくれたな、とうれしい気持ちです。
シンプルでも、オリジナルのものを形にできてよかった！

そんな中、制作を進めながらいろんなWebサイトを見ていると、シンプルかつ新鮮な動きとレイアウトを取り入れたものをよく見るようになりました。

例えば、さいきんTwitterのTLに流れてきてとても素敵だなと思ったサイトがこちらです...

こんな風に独自の見せ方ができるサイト、いつか作ってみたいな...！
(夢がうまれました)

そしてコーディング面では、動きを加える・データのやりとりを行うという点でJavaScriptをとにかく書きたくて今回のような実装方法となりましたが、自分が憧れ続けているポートフォリオサイトがあります。
制作記まとめられてます。

qiita.com

Vue+Firebase。
Vueに挑戦する度挫折していて、原因はJavaScript読めてないからだ！と思い現在に至るという感じなので、そろそろこの辺を解読したいところです。

一つ制作を終え、また新しくやりたいことも増えてモクモクと妄想を膨らませる日々ですが、また一歩一歩進んでいきます！