###はじめに
私は転職活動のための、ポートフォリオを作成中です。
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