結論から言いますと、イラストレーターのポートフォリオサイトもスマホ対応は必要です。てか、どんなウェブサイトでも今はスマホ対応ほぼ必須、だよ。
なぜスマホ対応がイラストレーターのサイトにも必須なのか、スマホ対応サイトを作るためのポイントなどを紹介します。
パソコンで見られることが多いのだから、スマホ対応はいらないのでは?
よく言われるのがコレ。
イラストレーターという商売って、基本はBtoB(企業間取引)に近い。ウェブサイトを主に見てもらいたい相手って、出版社の編集者とか制作会社のアートディレクターとか、だよね。
その人たちがウェブ上でイラストレーターを探す場面を想像したとき、仕事中だからたぶん社内からパソコンで見てることが多いはず。
ということは、イラストレーターのポートフォリオサイトって、別にスマホ対応は必要ないんじゃないの?……という質問がよくあるんだけど。
でも、それでもスマホ対応は必要です。スマホ対応が必要な理由って、じつはそこじゃないんです。
今はどんなウェブサイトでも、スマホ対応は実質「必須」
Googleが「モバイルファースト」になったから
スマホ対応が必須になった本当の理由は、数年前にGoogleが「これからはスマホ対応サイトを優先的にチェックしていきますよ(意訳)」って表明したから。
Googleは検索結果に載せるウェブサイトを日々収集してて、それぞれのウェブサイトの中身をいろいろチェックした結果、検索順位なんかを決めているわけです。
そのいろいろチェックのために今までは主にPC版サイトを見て決めていたんだけど、それをスマホ版サイトを見るように変えます、っていう方針転換があったわけ。この新しい方針を「モバイルファーストインデックス(MFI)」っていって、2020年からは実際に適用がはじまっています。
スマホ対応されているほうが検索結果で優遇される(かも)
別に「スマホ対応してないサイトはGoogleから一切無視される」というわけではないから、あわてないで。だけど、イラストレーターが二人いたとして、どっちのウェブサイトも同じような内容で同じような規模だったとしたら、スマホ対応されているほうのが「良し!」と判断されるのは確実で、検索順位にもおそらく差がつくでしょう。だから、スマホ対応はして当たり前、ということになったんです。
なぜこんなことになったかっていうと、もちろん世界的にスマホが普及したから。むしろPCよりスマホでの閲覧数のほうが多いウェブサイトもめずらしくないしね。世の流れに沿ってGoogleの方針が変わっていく以上、どんなウェブサイトも乗っからざるをえない。
スマホ対応でないウェブサイトをスマホ対応に変えるには?
ちょっと古いウェブサイトを持っているイラストレーターさん。自分のサイトをスマートフォンで見てみてください。もしスマホ対応をしていないのなら、文字や画像がめっちゃ小さく見えたりして、使いづらさを感じるはず。ぜひともスマホ対応にすべきです。
余談だけど「画像・文字めっちゃ小さい」「読みづらい」「押しづらい」ってところも、Googleボットにはしっかり把握されてるよ。
ウェブサイトをスマホ対応に変えるには、場合によるけど、だいたいはけっこうな手間がかかることが多いです。
スマホ対応化は手間かかる理由
その理由は、デザインを再構築しなきゃいけないっていうのがひとつ。それと、スマホ対応を一切無視して作ったウェブサイトってすでにけっこう古いはずだから、技術的にも遅れていていろいろ問題が発生していることが多くて、そこが引っかかってすんなりリニューアルできないってことがある。
WordPress製サイトは?
WordPress製サイトの場合は、スマホ対応テーマに変えたらすぐ済むのでは?ってそれでうまくいく場合もたまにあるけど、だいたいはテーマを変えたらどこかの表示がおかしくなったりして、結局大幅な修正が必要なことがほとんどです。
作り直したほうが早いし効果的かも
スマホ対応って、何かちょっと付け足したらはい!対応完了!ってなわけにはいかない。
じつのところスマホ対応できてないイラストサイトって、古い常識のもとで作られていて「一応あるけど仕事の依頼問い合わせなんか来たことない」なんてことも多いので、ぶっちゃけ構成から考え直してそっくり作り変えたほうが早くて効果も上がりやすいかも、です。
スマホ対応イラストサイトを作るかんたんな方法
これからイラスト個人サイトを作る人、スマホ対応で作っていきたい、って人へ。
イラストレーターは自分でウェブサイトを作る人が多くて、中には「少しくらいならHTMLとかもわかる」って人もいると思う。それでもスマホ対応サイトを何もないところから自力で構築する、ってのはまあまあハードルが高いですよね(私はゼロから作りますけど、ウェブのプロでもあるんで例外中の例外ですね)。
ウェブに詳しくない人がスマホ対応のイラストサイトを作るにはどうしたらいいか、挙げてみます。
Adobe PortfoloとかJimdoとか、ウェブサイト制作サービスを使う
こういう「ブラウザだけで操作ができてかんたんにポートフォリオサイトが持てるよ」系のサービスはだいたい例外なく、別になんも考えなくても、作れば勝手にスマホ対応サイトになってるってことが多いです。
だってまあ、今時「スマホ非対応サイト」なんて誰も喜ばないし。サービス側としてもスマホ対応なんていまどき当たり前だよね、っていうスタンスですね、どこも。
WordPressでスマホ対応テーマを使う
WordPress製サイトを作る場合は、スマホ対応で作られたテーマを選びましょう。といっても、 今はほとんどのテーマが元からスマホ対応で作られてます(むしろスマホ対応を無視したWPテーマなんて探してもなかなか見つからないと思う……探してへんけど)。
プロに作ってもらう
HTML製にするにせよWordPress製にするにせよ、完全にオリジナルで作りたくて、なおかつきっちりスマホ対応も!でも自分では技術がない……って場合はもう、プロのウェブ制作者に頼むしかないです。
お金かかるからそんなの嫌、ってイラストレーター多いけど、自分でウェブ技術を勉強するには何年もかかるんで、その時間と労力を考えたら安いし、もし頼む先のウェブ制作者がマーケティングとかブランディングとかわかる人だったらいろいろ勉強にもなる(しかもその知識って一生モノ)。本気でイラストレーターとしてやっていきたいんなら、「お金ない」ばっか言ってないでちょっと検討してみたらいいと思うんよ。
スマホ対応にするためのデザインのポイント
それでもスマホ対応サイトを自分でなんとか作りたい、という人へのアドバイスを手短にいうと、「あんまり凝ったデザインを考えるな」。
無料ツールとかで自分のサイトを作っていると、クリエイターのさがで、「もっとここのレイアウトなんとかならんかな」とか思うことが多いと思う。「もっと右に寄せたほうがいいかな」とか「ここはカラム分けしたほうがいいかな」とか。
そういうのをあんまり細かくやってると、スマホで見たときなんかぐちゃぐちゃに……ってことが起こりがち。なので、あまり技術のない人は、画像や文章を素直に縦に並べていくのが、無難にすんなりスマホ対応サイトを作っていくためのコツです。
あとデザインの知識が若干ある人はこういうところにも気をつけて。
- 見出しとか文章に、見た目を整えるための改行を入れるな。自分のPCで見て「ここで折り返されたらいい感じなのに」と思って改行を入れると、スマホでは余分に折り返されてめっちゃ読みにくい、ってこと多すぎ。
- 見出しの画像化はするな。見出しの文全体を画像で置き換えるのって昔は割とポピュラーな手だったんだけど、今はスマホで見ると確実に見づらいため絶滅しました。
- 画像のタテヨコ比率に気をつけろ。正方形やタテヨコ3:4サイズの画像を使うようにしよう。画像はスマホで見ると狭い横幅に合わせてタテが縮小されることが多いので、横に細長い画像はスマホでは見えないくらい細くなっちゃったり、縦長の画像はスマホでは画面のほとんどを覆い尽くしてしまったりする。
スマホ対応されたウェブサイトやその制作手順のことを「モバイルファースト」って呼ぶこともあります。デザイン、構成、機能を考えるとき、あるいはコーディング時、もはやPCサイト基準じゃなく、スマホサイト(モバイルサイト)から先に考えていこうよ、って概念で、最近のウェブ制作ではよく取り入れられてます。
イラストレーターのポートフォリオサイトもスマホ対応で当たり前。ってことで、作る人には手間が増えるけど、そういう時代なんで、グッドラックです!
いしつく!の教科書
「ポートフォリオサイトで仕事依頼が来るって、ほんとにそんなこと可能なの?」
そんなイラストレーターに読んでほしい全5章のnoteマガジンです。専門用語はできるだけ使わずに書きました。
目次 & 概要
-
まえがき 9割のイラストサイトは仕事の役に立っていない
そもそもウェブサイトを仕事に役立てること自体が無理なのでは?そう思っているかたに、私の体験をお話しします。まえがきを読む » -
第1章 イラストサイトに仕事の問い合わせが来ないのは、こんな勘違いをしているから
「作品ギャラリー」を作ろうとしたり、ウェブサイトなんか活用できないものと思い込んでいたり。よくある勘違いを挙げました。1章を読む » -
第2章 仕事の取れるイラストサイトを作るための、正しい作戦
どう作り、どう利用していくべきか、という全体の作戦をお伝えします。いちばん大切なのは、信頼を得ること。バズや過剰なアクセス稼ぎは要りません。2章を読む » -
第3章 仕事の取れるイラストサイトを作るためには、こんな材料をそろえよう
ドメインやサーバー、コンテンツの用意のしかたを解説します。プロフィール文の改善例や、イラスト画像の準備のポイントなど。3章を読む » -
第4章 仕事の取れるイラストサイト、レイアウトの正解例
実際に運営されているウェブサイトのレイアウトとページ構成を解説します。なぜそのようになっているのか、デザインには理由があります。4章を読む » -
第5章 作ったあとどうする?上手な活用とは
ウェブサイトは作って終わりではありません。SEOについて、ブログのやりかた、営業メールの送りかた、現実の営業に活かしていく方法など。5章を読む »