概要
サイト名
Portfolio.ryo-flute.com
サイト概要
自身のポートフォリオをまとめるためのサイト
目的
自身のポートフォリオをまとめて公開し、閲覧しやすくする。ブログ機能で詳細な説明や備忘録を記録、公開する。
最終的なアクション
就職活動に役立てる。そのほか、Web制作という方面で何かしらのつながりが生まれると嬉しい。
デザインイメージ
他のポートフォリオを紹介することがメインであるため、このサイト自体は主張を控えめにする。かつ、最低限の主張として青緑をテーマカラーとして多めに使用する。
使用色
ベースカラー…白 メインカラー：hsl(180, 100%, 30%)位の青緑。文字色…hsl(180, 100%, 10%）位の濃い青緑。
参考サイト
Webデザイナー佐藤タカアキさんのポートフォリオサイト https://sato-takaaki.work/
WebデザイナーTokuda YuichiさんのWebサイト「UNDERLINE」 https://u-d-l.jp/
制作時間
デザイン -時間
素材収集 -時間
コーディング56時間(HTML+PHP30時間、CSS24時間、Javascript2時間)
計56時間
詳細
※職業訓練でWordpressを学んだあとに制作しました。Photoshopやデザインカンプを扱う前に制作しているため、ワイヤーフレームやデザインカンプは制作しておりません。
制作物をまとめるためのサイト。今、閲覧してくださっているこのサイトです。気を付けたポイント、大変だったことなどを書くと長くなるので、そのあたりはこうしてブログ記事としてまとめる方針にしてみました。他のポートフォリオも見ていただきたいので、ここはシンプルな印象にまとめたいと考えました。プロのWebデザイナーさんのポートフォリオサイトを少しばかり参考にしています。(検索するとすぐにヒットしました)
サイトタイトルは「Portfolio」だけではなんだか味気なかったので、ドメイン名を使用してみました。
WordPressを使用しています。ポートフォリオは「Webサイト」と「バナー」の2種類があり、それぞれをWordPressの「カテゴリ」として登録しています。ポートフォリオの情報を記事として投稿するだけで一覧に表示されるようにしています。
頑張ったところ
トップページには「Webサイト」、「バナー」、「ブログ」の各カテゴリの投稿を個別に表示させています。postdata()ではうまく動作しなかったため、new WP_Query()を使用しています。
「Webサイト」と「バナー」の投稿にはプラグイン「Advanced Custom fields」を使用しています。入力した項目を個別に取り出して表示させることで、投稿記事そのものを表示させず、一覧を自由にレイアウトできるようにしています。
制作を終えて
WordPressサイトとしては2つ目です。Webサイトとしては4つ目くらいでしょうか。WordPress、HTML、CSSの書き方に慣れてきた、安定してきたと思います。
「バナー」はまだ制作していないため仕様が微妙に定まっていませんが、差分が多い場合はメインの画像のみ一覧に表示させ、差分を投稿記事内で表示させる、という形式をとってもいいのかもしれません。
今後も制作物を増やしていきたいと考えています。それ自体がアウトプットとなり、自分自身も「いろんなサイトが作れる」、「こんな実装ができる」ということを確認できるいい機会になると考えています。