どうも！
むたです！
久々の投稿です！
今日は祝日でお休みだったので、サイトを作りました！
前回、友人のホームページを作ったときの、新しい申し込みページです！
全然、作成途中なのですが、作っている過程を載せてみます！
どうやってホームページができるのかをお見せできたらと思います！
※サーバー・ドメインの契約のところは割愛です（さくらサーバーがおすすめ→安いから）
ホームページ作成過程公開
ホームページを作成するHTML/CSSを学習し始めたのは去年の5月ごろでした。
今では、友人のホームページ作成、フォトグラファーの方のホームページ作成に関わらせていただきました。
そして、今回は、友人のホームページの第2弾ということで、新たに申し込みページを作ることになったのでその過程を書いていけたらなと思います！
第一弾はこちら↓
友人のホームページ作成第一弾完成しました！
ちなみに、ベースは3時間位でつくりました！（朝11:00~14:00くらいまで）
https://astrology.mayumitravel.com/
ワイヤーフレーム作成（サイト全体の構造を決める）
まずは、サイト全体の構造を考えます！
サイトは縦に長いので、デザインするときもそれを考慮して作成します！
むたは、手書きで済ませていますが、Adobe XDをつかって作成するのが一般的なのかもしれないです！
手書きでも十分サイトは作れます！
コーディング
今回は、もともと申し込みページを作成していたときのindex.htmlとCSSがあったのでそれを流用しました！
流用したけど、ベースで使っただけで、サイトの印象は大きく変わっていると思います！
ベースにしたサイト：https://fashion.mayumitravel.com/
今回のサイト：https://astrology.mayumitravel.com/
いちど、0から構築した経験があると、そのベースを使えるので2回目以降ははかどります！
※index.htmlとCSSはサイトをサイトたらしめるホームページに必要不可欠なファイルのことです！ちなみにCSSだけファイル表記じゃなかったけどstyle.cssとするのが一般的です
テーマカラーに沿ってデザインする
今回テーマカラーは薄めのダークピンクなので、それを思いっきりヘッダーに持ってきました！
あとは旅がコンセプトで、もともともらっていた資料に世界地図があったので、世界地図をピンクにして当てはめてみました！
画像の加工はこちらでやっています！
フォントがサイトの印象を決める
あと割とフォントが重要で、サイトの印象が決まります！
個人的には多用し過ぎもよくないのでタイトルのフォントをまずひとつ決めます！
ということで今回はこちらのサイトを参考にさせていただきました！
【デザイナーが厳選】与えたいイメージ別 おすすめGoogle Fonts 4＋1選
フォントで印象が大きく変わりますよね〜
今のサイトの状態は右のAbril Fatfaceというフォントになっています！
仮で文字を埋めるときはLorem ipsumで
サイト作成を始めた人はだれもが知ってることだと思いますが、仮で文字を埋めたいときはLorem ipsumを使います。
意味のない文章で、世界中のWebデザイナーが使っています
あ、文章はまだできてなかったなー・・・というときは、Lorem ipsumと検索してWikipediaからいつもとってきます。
https://ja.wikipedia.org/wiki/Lorem_ipsum
後かんたんな短い文章は個人的にはXXXXXXとかで済ませています！
皆さんどうしてるんですかね・・・
なんでもいいとは思いますが。
スマホで崩れがないかを確認して終了
レスポンシブ対応とか言ったりしますが、今の世の中ほとんどの人がスマホでネットを見る時代になりました。
ということで、開発するのがPCだからといってスマホを確認しないのはナンセンスです。
スマホでみてOKならやっと終わりかな〜（ほんとはiPhoneとAndroid両方みるのが完璧ですがわたしはiPhoneユーザーなのでAndroidは割愛しています）
Androidで気をつけないといけないのは、フォントですかね〜
Webフォントを使ってないと、せっかく適用したフォントがゴシックになってたりします、のでお気をつけください（経験あり）
※レスポンシブ対応は基本的にCSSをいじります↓（調べたら出てきますよ〜）
レスポンシブ対応するためのCSSの書き方
最後に
ということで、まだ完成はしていませんがベースは完成したので、それまでの過程を載せてみました！
5月から比べるとだいぶ作れるようになったけど、もっとおしゃれなサイトとか作りたいからもっと勉強したいですね！
ということで、今日はこのへんで！
それでは！
P.S.サイト作りたい人いたらお声掛けください〜誠心誠意お手伝いさせていただきます
コメントを残す