【ポートフォリオ】PHPとSQLを学習する前に、今まで行った事を、レポートにまとめました。

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

####ラフスケッチ

　サイトのざっくりとしたイメージを、ラフスケッチに描きます。
　ラフスケッチの写真を、一部抜粋し、掲載します。
<img width="200" alt="ラフスケッチのTOP画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968572/44832f8c-f816-3826-dde1-73c59476646a.jpeg">
<img width="200" alt="ラフスケッチの検索画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968572/6a1e885d-3f68-1a9a-1356-5baf20f62745.jpeg">

####GIMPでデザインカンプ作成

　ラフスケッチから、GIMPにてサイトのスマホ版とPC版の
　デザインカンプの作成をします。
　作成したデザインカンプの画像を、一部抜粋し掲載します。

<img width="300" alt="デザインカンプ、PC版のTOP画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968572/1fdbb206-7af2-3c61-d7d2-c6b0279641cf.jpeg">
<img width="300" alt="デザインカンプ、スマホ版のTOP画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968572/942e145c-ee81-df0a-c158-0094f35cd816.jpeg">



　　スマホ版と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