ポートフォリオサイトの作り方(コード苦手なデザイナー・イラストレーターの方向き)

ポートフォリオやブログ欲しい人は
既存のHTMLテンプレから
WordPressタグ入れて
テーマ作るか、配布されてる
WordPressテーマをダウン
ロードして使う方が効率的でかつ
爆速です!

自分のポートフォリオやブログ作成に試行錯誤しているMika(@designer_ mika)です。

今回の記事内容はこれからWordPressサイトを作りたい人に向いてる内容です。

正月休みでUdemyの動画授業「WordPress開発マスター講座」(https://www.udemy.com/course/wordpress_master/)を受講してstartbootstrap(https://startbootstrap.com/)を教えてもらったので 授業のサンプルサイトを作りながら自分のポートフォリオテーマを作成しました。

学びながら同時に自分の作りたいサイトを構築する! これがプログラミング習得の最短な近道だと思います。
WordPress書籍のサンプルサイトでもいいから最初は自分自身の趣味のブログから作っていくことをお勧めします。

私はゼロからWordPress構築をすることが滅多にないグラフィックデザイン寄りのwebデザイナーなのでPHPはほとんど理解できていません。

HTMLとCSS(SCSS)、gulp、Gitはコーディングで普段から仕事で使用しています。(web業界ではデザイナーでもエンジニアに合わせて使わざる得ない状況になっています。どういうわけかね。 )

「WordPress開発マスター講座」でエンジニアの講師から学んでゼロに近い基礎を忘れてる状態からWordPressテーマを作りました。
元々、WordPressは基礎がしっかり身についてない状態で案件やってましたからね。。。 デザイナーなので今までコーディングがショボくてもデザインでごまかせてweb案件取れてた感が大きいです。

仕事の合間に学ぶこと2週間。 おおっ!?今頃になってカスタム投稿作った時の管理画面のアイコンの変更の仕方が理解できた!って思いました(^^;)

カスタム投稿メニューの全てがデフォルトの状態だとピンのマークが出るのはUI的にもわかりにくいので自由にカスタムできる方がいいですよね。

お問い合わせフォームの設置方法について

講座ではフォームはプラグインの設置とフォームのHTMLの設置まで教えてくれましたが、MW WP Formの詳細な設定の仕方は下記URLにマニュアルがあるのでその通りに設定していけば問題ないです。

MW WP Formのマニュアル

https://plugins.2inc.org/mw-wp-form/manual/
Web制作会社の現場では比較的に確認画面が設定できるMW WP Formの方がよく使われています。バリテード.JSが内蔵されていてGoogleアナリティクス設置がフォームに追加できるからが理由のようです。 コンバージョン意識した完全ビジネス向けのフォームのようです。 確かにサイト運営者としてはお問い合わせのCVや履歴は意識したいです。

初心者の人が手軽に設置できそうで送信エラーが少ないのはContact form7だと思います。WordPress初心者の肌感的にはContact form7が使いやすい印象です。
ちなみにContact form7でも確認画面は作ることはできます。 何故か作れない説がネットで流れてるけど確認画面もサンクスページも工夫次第で作れます。

参考サイト

https://haniwaman.com/contact-form-7-add-page/

WordPressテーマ自作して思ったこと

仕事が暇な時期じゃないと絶対にWordPressテーマの自作とか無理っ!!と思いました。 学ぶことと同時に制作してもブログサイトでも2〜3週間くらいかかります。
時間がない人は配布されてる有料・無料テーマから作る方が時短になりますね。特に機能やデザインにこだわりなければWordPressは配布テーマで作る方がいいかもしれません。

下記のCocoonという無料配布テーマが高速化対応してて良さそうです。

ここまで高機能なWordPressテーマが無料というのが信じられませんが‥。そういう時代なんだなと思います。

ページ高速化対応

最近、Googleは「ページ表示の高速化」に対してえらく力を入れているようです。なので出来る限りGoogleの高速化(PageSpeed Insights)に最適化できるように作りこみました。
テーマ側の設定のみで100点~90点台後半は出るかと思います
Lighthouseでもオール100点も取れました。

その他、やっておいた方がいい設定

できればサイト高速化のためにプラグイン使わずOGN設定はfunction.phpで設定する方が良いかと思います。

SNSシェアボタンもプラグインなしで設置を参考にしました。

よくある「次の記事」「前の記事」のFlexbox を使って実装する方法の参考記事。

これはWordPressでサイト作るなら絶対にやった方がいいサイト高速化の方法です。「PageSpeed Insights」で50点以下だと記事が検索上位に上がることは厳しい状態です。なぜか最近のGoogleは異様にスマホなどのサイトスピード重視しています。

いろいろやってみたらサイトスピード上がりました。これがまた難しいなと感じました。

最後に‥フリーランスクリエイターのブランディング的なお話

WordPreeやコードで
生計立ててる人ならイチからコーディ
ングする事に拘ってもいいけど
その他のクリエイターに
とっては自分でコーディングした事を
アピールしても評価ポイントに
なることは少ないです。

webデザイン関係ない、コーディングも関係ない仕事してる人にとってはあまり自分でWordPressテーマを自作したぞー!!という自己アピールは意味がないと思いました。

デザイナーがコーディングの話題をブログやSNSで書きすぎると「この人コーダーかフロントエンジニアさんなのかな?」と思われてしまうデメリットを感じました。(Twitterでもそういうwebエンジニアかエンジニアなりたい人のフォローが増えてきますし。。)

私は今まで自分で間違ったwebマーケティングをしていたと思います。

フリーランスで自分がやりたい仕事したいならそれに特化した専門記事を書くことがブランディングにつながると気づきました。

デザインやイラストが得意な
人はそれを前面に押し出すコンテンツ
の見せ方の工夫(web・SNS
マーケティング)をした方が良いと
思うわけです。

※WordPressテーマ制作についての質問は個人的には受け付けておりません。 ※プラグイン動作についての不具合の質問にも受け付けておりません。

Follow me!