常盤クニオイラストレーターの常盤クニオです。長かったこのシリーズもいよいよ後編です!前編ではポートフォリオサイト制作の考え方について、まずはWordpressを使う使わない関係なく説明してきました。発注者目線が決め手!イラストレーターもWordPressでポートフォリオサイトを作ろう(前編)そして前回の中編ではWordpressの環境準備について書いてきました。発注者目線が決め手!イラストレーターもWordPressでポートフォリオサイトを作ろう(中編)そして今回の後編では、いよいよ実際にWordpressを使って、ポートフォリオサイトを制作していきます。これを意識することです!ですので、あえて今回の記事はWordpressの知識や使い方に特化した内容にはしておりません。Wordpressを含むどんなツールであれ、考え方としては共通するものを書いているつもりです。参考になればと思います。Contentsサイトを作っていこうサイトの見せ方を考えていくスマホやパソコン、タブレットも考えるメインビジュアル(ヒーローイメージ)導入部分について制作実績についてサービスの特徴インスタグラムの読み込みについてプロフィールについてSNS投稿時にアイキャッチを表示させる「発注者」になれば話は早い最後にサイトを作っていこうアレンジとは言っても、見栄えをよくすることよりも、まず「何を見てもらうのか」をしっかり考えておく必要があります。そのためにはトップページの構成をしっかり考えておかないと、「このサイト...欲しい情報もなさそうだし、すごく見づらいな」となってしまい、すぐに離脱されてしまいます。今回のポートフォリオサイトを制作する上で、トップに入れようと考えていたメインコンテンツは以下の通りです。Extentionの初期状態(左)と、それをアレンジして最初に制作したバージョン(右)のサイトの比較画像を載せています。現バージョン(このサイト)とは違いますが、基本的に考えていたことは同じです。いう理由でこのデザインやコンテンツにしているのかを上から順番に書いていこうと思います。サイトの見せ方を考えていく上にも書いたように、サイトの顔であるトップページは各コンテンツへのアクセスが容易な状態にしておきたいところです。「いつでも最新の情報が見られる」ということは念頭に置いておきたいですね。スマホやパソコン、タブレットも考える上記の画像はパソコンでの見え方ですが、今はスマホでの閲覧が主流。スマホで見たときもコンテンツが冗長にならないよう、バランスを考えて制作しました。長すぎると単純に見るだけで疲れるのと、読み込みが長くなりすぎるので離脱の原因となります。ちなみにスマホで見たときだけ特定のコンテンツを表示しないようにして短くする、といった作り方も可能ですが、Googleはそういった作り方を推奨していません。ペナルティを食らって検索順位が下落してしまう恐れがあるので、PCとスマホでのコンテンツにはあまり差を付けないことが重要です。Extentionの初期値だと、一番最初に目に入ってくる画像部分(メインビジュアルやヒーローイメージと呼ばれています)がかなりデカいです。ファーストビュー(スクロールする前の1画面)で画面が全部埋まってしまうレベル。ここで力を入れたイラストを見せたいとか、動画をここで見せるとか、何か理由がない限りはここまで大きい必要性は無いので小さくしました。(まぁそれでもデカいんですが...笑)メインビジュアルは、一番最初に目に入ってくる内容です。言うなれば、本の表紙。紙のポートフォリオでも表紙が第一印象ですよね。ここで考えなければいけないことは、「自分が見ているのと同じものを、閲覧者全員が見られるわけではない」ということ。デスクトップPCの画面とノートパソコンでは、ノートパソコンの方が幅が狭いことがほとんどです。なると、メインビジュアルが最初の画面に占める割合というのも環境によってかなり変わってきます。最初にサイトに訪れたときの印象が、その人の環境によって変わってしまう、ということです。カスタマイズ」などのキーワードでググってみてください。Extensionの最初の状態だと、人気記事がコンテンツ項目の先頭に来るようになっていました。推したいのはブログではなく、あくまでも制作事例。メインビジュアルの下に人気記事が来る必要性はありません。こちらがターゲットとしている訪問者も、人気記事を見たくてやってきている可能性は少ないでしょう。いえば、ポートフォリオサイトとはいえ、サービス(商品)を紹介するサイトです。売りたい商品を出すのではなく、「サービスの紹介」を入れてあげたほうが「どんなサービスを提供してくれるサイト・イラストレーターなのか」が理解できます。このあたりは現サイトでも継承している考え方です。Extentionのデフォルトでは入っていませんでしたが、制作実績のタグがついている記事が最新投稿順に並ぶようにしました。ここも肝心です!制作したイラストがサムネイル(記事一覧に出てくる小さい画像のこと)になるように設定し、一覧で見たときでもタイトル部分で何の仕事か分かるようにしました。パソコンで見たときに一列に何個の記事が並ぶようにするか、というところは見栄えを確認しながら設定しました。Extensionの初期状態だと、4つのコンテンツが縦に並んでいるところです。理由としては各ソリューション(例えばWebデザインやグラフィックデザインなど複合提案サービスの提供)がまだ確定していないため、そもそも出せるコンテンツがまだ存在しません...。(早くやりたい)※現行サイトでは最上部に書いている内容です。何にしても、ただ作りますという形ではなく、お客様から見たときに「どんな価値を提供してくれるのか」、「今抱えている課題をどんな形で解決してくれるのか」というところが最も重要になってきます。いうことで、ここにデフォルトのようにソリューションサービスを並べる見せ方自体は、分かりやすいはずです。見せる際に、「キャラクター作りますよ!」という物売りのように描くのではなく、「どんなニーズに対して、どういう目的を持ったキャラクター制作が出来るのか?」がわかると、発注者もイメージがしやすいんじゃないかなと思います。インスタグラムの読み込みについて今インスタに投稿している内容は、普段仕事でやっているテイストとはまた違った雰囲気で制作しています。これは自らの制作の幅を見せるためにやっていることで、サンプルカタログのような意味を持たせています。Lite」というプラグインで設定しています。すごくかんたん!!この話、今回直接関係ある話ではなかったので悩みましたが、一応書いておいた方が良いかなと思い...どうやら2020年までに、ポートフォリオサイトを始めとした外部サイトへInstagramのデータを読み込んでくるのが難しくなりそうです。API」全機能廃止に向けて、企業はInstagramの効果分析をどうすべきか?要は自分のInstagram個人アカウントからデータを読み込んでこられなくなる、ということです。見せたい場合はInstaの自分のページへのリンクを貼って、そこで見てもらってね、ってことですね。show」はまだ使えると思うんですが、明確にいつ使えなくなるかわからないものを、自分の顔となるようなサイトトップに置いておくのは危険...!!!↓読み込めているうちは表示されていると思います。4月月14日午前4時31分PDTプロフィールについて発注する側にとって、フリーランスのような個人に発注するのはリスクも有り、なかなか難易度が高いものです。僕も発注側に立つことがありますので、そういった意味では「発注しようかな」と少しでも思う前に、「この人は(この企業は)どんな人なのだろう」と考えることがほとんどです。大事なのは、「すごそうな人だ!じゃあ発注してみようかな!」ではなく、「コンテンツやサービスの質は良さそうだな...でも、実際に発注しても大丈夫な人(きちんと仕事してくれそう、ビジネス的に信頼たりうる人物)かな?」というロジックをたどるということ。仕事を請ける側として、情報を見せる上でココが大事なポイントです。サービスが自分のニーズにある程度合ってしまえば、サービス提供者はその次に気になるポイント。前回の制作時にはトップページの一番下にプロフィールを置いていましたが、これはこのロジックを考慮してのこと。プロフィールページを別途制作し、そこを参照してもらうことも多いでしょう。トップページにプロフィールや会社概要が入っている必要性はないと思いますが、トップページからアクセスができない状態は望ましくないと思います。現サイトではプロフィールページを充実させたため、トップには入れていません。SNS投稿時にアイキャッチを表示させるTwitterでシェアした時に、URL付きだとサムネイルが表示されると思いますが、あれも実は表示するための設定が必要です。参考にしたのはこちらです。下に出ているサムネイルも、SNSシェア用に設定されているものですね。【2019年版】Twitterカードとは?使い方と設定方法まとめサルワカさんのサイトを参考にしました!アイキャッチは画像のデザインに少し気をつけるだけで、記事へのアクセス数が変動します。どんなアイキャッチが効果的なのか?といった部分はA/Bテスト(複数の画像を用意して、どちらの方が効果が伸びるかのテスト)をやってみるなどして調べてみると面白いですよ!「発注者」になれば話は早い発注者目線の話をずっとしてきましたが、理解するのに一番てっとり早いのは、自分自身が一度イラストの発注者になることです。仮に自分自身で何かを作るとして、そこに必要なビジュアルを発注する想定で他のサイトの方を覗いてみると、新しい発見がたくさんあります。本当に使う機会があるのであれば、ココナラやクラウドワークス、ランサーズなどのサイトで実際に発注するのも良いと思います。(実際に使わないのに発注するような架空発注はダメですよ)発注するために自然に考えることや、発注を実際にしようとしたときのサイトのフローが「頼みやすいかどうか」。結局は自分自身のサイトの使いやすさに直結しますので、一度やってみることをお勧めします。サイトの構成とは別に、どんなイラストを発注してほしいかといったことや、どんなイラストが発注されやすいかという「自分の強み」も把握・分析しておくとサイトの精度も上がると思いますよ!最後にWordPressの技術的な部分まで深く触れることはしませんでしたが、(触れだすと何ページあっても足りない)そもそものサイト制作の基本は「見せ方・考え方」だと思います。今回このWordpressという方法をとったのは、継続的に事例紹介やブログ記事を更新することや、トップページでもブロック単位で柔軟にコンテンツを入れ替えるなど、細かい更新を積み重ねていく前提での選択。以前書いた通り、そもそもポートフォリオサイトを全く違った構造にするのであれば、Wordpressという選択肢でなくても良いと思います。@illustrator920プロフィール常盤クニオ東京在住のフリーランスのイラストレーターです。IT企業でインハウスデザイナーとして10年以上、Webや広告のデザインからイラストの制作に携わっています。2009年からはフリーイラストレーターとしても活動。女性や子供をターゲットとした柔らかいイラストが得意です。「ちょっとしたカットがほしい!」から、キャラクターデザインまで。雑誌や書籍、広告やWebまで、媒体に合わせて幅広くご対応しています。デザインやイラストでお困りの際はぜひ一度ご相談ください。イラストレーター・常盤クニオのポートフォリオサイト。