はじめに
私は転職活動のための、ポートフォリオを作成中です。
PHPとSQLの学習に入る前に、それまで行った事をまとめました。
作成中のポートフォリオサイト：https://neptune.sakura.ne.jp/Hanatachi/
ポートフォリオサイトのGitHub：https://github.com/fujioka8700/Hanatachi
1.サイトの目的の明確化
道端に咲いている花たちについて、語れるコミュニティの作成、運用。
2.サイトの狙い、目的
道に咲いている花たちの紹介。
コミュニティを作り、情報交換の場を作ります。
3.ターゲット
ウォーキングをしている人たち。
これから、ウォーキングを、始めようとしている人たち。
花が好きな人たち。男女は問いません。
4.サイトを作ろうとした動機
私は健康維持のために、ウォーキングをしています。
ウォーキングをしていると、初めて知るお店や、
見たことのない景色に、遭遇することがよくあります。
目の前の大きな発見があるとともに、小さな発見もよくあります。
それは足元に咲いている花たちです。
道端に咲いている花をよく見てみると、
色鮮やかに、キレイにかわいく、たくさん咲いています。
しかし、歩く人々は、イヤホンで音楽を聴いたり、
知人と話し合って、歩いているので、花たちに見向きもしません。
私は、普段何気なく歩いている道には、
花たちが、キレイに咲いていることを、見てほしいと思いました。
そして、この花たちについて、語れるコミュニティを作りたいと思い、
このサイトを作ろうと思いました。
5.サイト制作スケジュールと、製作方法
WBSとガントチャート
サイト制作に必要な作業を列挙して、Googleスプレッドシートで、WBSとガントチャートを作成しました。
https://docs.google.com/spreadsheets/d/135Wihnksz9lRj_IjUm0-P7GtRTXzRmpXG-Jp-oinOLQ/edit?usp=sharing
ラフスケッチ
サイトのざっくりとしたイメージを、ラフスケッチに描きます。
ラフスケッチの写真を、一部抜粋し、掲載します。
GIMPでデザインカンプ作成
ラフスケッチから、GIMPにてサイトのスマホ版とPC版の
デザインカンプの作成をします。
作成したデザインカンプの画像を、一部抜粋し掲載します。
スマホ版とPC版の、各1枚ずつ。計18枚、作成。
TOPページ
道端の花たちとは
花を楽しむ
ウォーキングのすすめ
花の検索（TOP画面）
花の検索（検索結果一覧）
花の検索（花の詳細表示）
掲示板
更新情報・お知らせ
素材となる写真は、以下の2つの方法で集めました。
・私がウォーキング中に、見つけた花をスマホで撮影しました。
・pakutaso.com様から、写真からお借りしました。
作成したデザインカンプをもとに、VisualStudioCodeにて、
マークアップとコーディングを行いました。
スマホとPCに対応させたサイトを各1ページずつ。計7枚、作成。
TOPページ
道端の花たちとは
花を楽しむ
ウォーキングのすすめ
（仮）花の検索（TOP画面）
（仮）掲示板
更新情報・お知らせ
使用言語
HTML
CSS
SCSS
JavaScript
使用したプラグイン
jQuery（Slickを使うために、導入必須）
Slick（TOP画面の画像のスライダー）
その他
ハンバーガーメニューは、自作しました。
6.結果と考察
GIMPでのデザインカンプの作成が苦戦しました。
今まで行ってきた、プログラミングの技術は一切使わないからです。
マウスとキーボードで、1px単位で画像と文字の調整を行って、
サイトの完成図を、作るのは大変でした。
マークアップとコーディングに関しては、
1ページ、確実なものを作れば、他のページは作りやすいことがわかりました。
あとプラグインとしてあるものは、自分自身で作るべきではないです。
スライダーを自作しようとしましたが、使い勝手も見栄えも、SlickSliderには敵いません。
プログラマの中で格言である、「車輪の発明はするべきではない」、
ということが、よくわかりました。
ただ、JavaScriptの勉強にはなりました。
スライダーを自作しようとした時に、
オブジェクトとノードのことを、よく理解できました。
7.感想と今後の課題
デザインカンプの作成時、素材として撮影した写真は、
かわいく見えるよう、加工できるようにしたいです。
検索と掲示板は、まだ制作できていません。
使用するPHPとSQLの知識・技術を、現在、学習中です。
今後はPHPとSQLの基礎を習得して、サイトの完成を目指します。
8.参考文献
境祐司 著 「Webデザイン標準テキスト―変化に流されない制作コンセプトと基本スタイル―」
https://gihyo.jp/dp/ebook/2012/978-4-7741-5086-4
9.サイト作成時、使用した主なソフト
GIMP（デザインカンプの作成） https://www.gimp.org/
Visual Studio Code(マークアップ、コーディング)
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
便利だった拡張機能
Japanese Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
Beautify css/sass/scss/less
https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier
Live Sass Compiler
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Visual Studio IntelliCode
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
SourceTree（GitHub使用のため） https://www.sourcetreeapp.com/
FFFTP(ホームページを公開するため) https://ja.osdn.net/projects/ffftp/
Windows付属の電卓
ホームページの動作確認ブラウザー
Chrome(PC、スマホ)
Firefox(PC)
Edge(PC)
10.素材を、お借りしたサイト様
PAKUTASO様 https://www.pakutaso.com
GAHAG様 http://gahag.net