どうもこんにちは！
先日から知り合いの業者さん向けのホームページのサンプルを作成しています！
ここまでの経緯は他の記事にしています。
Web作成だけを専業でやっているWebクリエイターではないので、私が比較的簡単に作ることができるWordPress でホームページのサンプルを作成しています。
試行錯誤しながらなんとか会社のホームページとして形になってきました。
ということで、ここまでの途中経過なんかをブログに記録したいと思います。
企業用のサンプルサイト作成が形になってきた！【ワードプレス】
とりあえずサンプルとして作成しているサイトがある程度完成してきました！
これで一度知り合いの業者さんに「こんな感じのホームページが作成できますよ！」とそれとなく話をしてみようと考えています。
前回お話しした時は私の経験値も少なかったこともあり、 自信を持ってホームページの作成を請け負えます！という話ができませんでした。
だがしかし、サンプルサイトをある程度作ることができたので少し自信がつきました！
このサンプルサイトを見て「センスがないなぁ！微妙だわ！」って思われたら仕方がないのですが、
とりあえず会社の案内を載せたホームページとしては、自分的に合格点だと思っています。
サンプルサイトなので具体的なデータを差し替えたり、 デザインを修正したりといろいろ変更点はたくさんあると思いますが、
とりあえずこのサンプルを持って受注につなげられるように営業をかけていきたいと思います。
そんな形で次の方向性の話をしましたが、ここまででの学びについても書いておきたい。
企業用のサイトをワードプレスで作成してみて学んだこと、苦戦したことを書き殴っていきます。
企業用のワードプレスサイトの作成で苦戦したこと！
ここまでで苦戦したことから振り返ってみたいと思います。
とりあえず 無料のWordPressテーマ「Cocoon」で、サンプルサイトの作成を開始したのですが、
HTML と CSS と PHP の知識がある程度ないとやりたいことが実現できなかったり、デザインの調整で苦戦します！
普通に個人のブログなら見出しとかを少しカスタマイズすればデザインも終わりという感じにもできるのですが、会社用のサイトとなるとデザインも少し良くしたいですよね！
「このロゴを右上に表示させたい！」そんなような簡単なことではまってしまい、途中で心が折れそうになりました！
なんとか最終的に対処法を見つけることができたのですが、まだまだ解決していない問題もあります。
どんなことにハマったのか箇条書きにしてみたいと思います。
- 一部の背景の設定がコントロールできない。
- フッターの下に意図しない隙間が空いてしまう！
- 問い合わせ用のロゴをヘッダーの右上に表示させたい！
- 固定ページの投稿日や更新日の情報を非表示にしたい！
- CSSのdisplayプロパティって何？
- CSSのfloatプロパティって何？
- ブロック要素とかインラインって何？
- FixBoxって何？（レイアウトに役立つモジュールだった！）
- かっこいいサイトに中々デザインできない！
- ずっと解決策を探しても見つからないと心が折れそうになる
- 画像など良い素材がすんなり見つからない！
- 画像編集ソフトを上手に使いこなすことができない！
とりあえずはまった内容や調べたこと感じたことはこんなところでした！
企業用のワードプレスサイトの作成で学んだこと
次にここまででどんなことを学んだのか成長できたのか振り返ってみたいと思う。
- サイト作成のイメージがわかない時は、競合サイトをたくさん見て参考にすると良い！そして真似して作って形にしていくことがゴールへの近道だと感じた！全部パクるっていうのは良くないけど、真似しつつオリジナリティを加えていく
- Googleの ブラウザ Chromeの検証ツールを使うとHTMLとCSSの解析と理解にとても勉強になる！
- 画像編集は「Fire Alpaca（ファイアーアルパカ）」という画像編集ソフトを使うと初心者でも結構良い画像が作れる。
- ブロックとインラインの理解にはサルワカさんのサイト見てとても勉強になった。（HTMLとCSSのことが分かりやすい）https://saruwakakun.com/html-css/basic/display
- ロゴヘッダーの右上に表示したかった件は、floatプロパティで コントロールするのではなく Fixboxが設定されていることに気づかなかった。
- 「CSS Fixbox」の使い方等で検索して勉強したら、とりあえずこの問題を解決することができた！
- タイトル用のロゴを作成するだけでかなりサイトの見栄えが良くなる！
- 背景はヘッダーからフッターまで統一すると見栄えが良くなる。
- 他にも画像素材をたくさん使うとサイトの見栄えが良くなる。
- 写真や画像のスライドは 「MetaSlider」というプラグインを使うと簡単に実現することができる。
- サイトのレイアウトも「Page Builder」というプラグインを使うと簡単に実現することができる。
- 固定ページの日付非表示は CSS で 記事のIDを指定して「display：none」にすることで解決した。
- とりあえずハマってもググって調べまくればだいたいのことは解決できる！
- 細かいことにこだわりすぎずにざっくり進めていくこと！
学んだことはこんなところです。
終わりに
とりあえずたくさんハマって落ち込んだりもしたけど、なんとかサンプルサイトをWordPress で作成することができました！
いろいろと勉強にもなったことも多く、仮に仕事を請け負ったとして作業してみるっていう行為はとても成長できます。
私みたいに慣れない仕事を請け負うのに自信がない人は、仮に仕事を受けたとしてシュミレーションしてみると良い経験ができるのでお勧めです！
サンプルサイトもできたので、知り合いの業者さんにホームページを売り込む準備に進んでいきたいと思います。
こんな感じでまた経過報告をしていきたいと思います。
