制作チーム「アトリエ∞（インフィニティー）」所属、グラフィックデザイナーのwachico.（わちこ）です。
今回の「おつD」は、先日「雑記」カテゴリのほうでお知らせしました「ミューズ明石クロノス – Facebookページ」にまつわるネタです。約1年の沈黙を破り、2023年年明けからめでたく再始動！ これに合わせて新カバー画像を作成しましたので、少しばかりご紹介します。
まず、その新規カバー画像がこちら。
過去記事「名刺のおつまみ。」をご覧の方はもうお気づきでしょうが、こちらの名刺デザインに使用したパーツを流用して作っています。ただ、これを仕上げるまでには「Web媒体ならでは」のちょっとした課題もありました。今回はそこにポイントを置いて、話を進めていきましょう。
なお、今回はいつもより実践的なお話も交えていきます。Illustrator（デザイナー必須描画ソフトのひとつ）を触ったことがない方には特に難しい、取っ付きにくいところがあるかもしれませんが…何卒よろしくです。
もくじ
【「レスポンシブデザイン」って何よ。】
【実践！ カバー画像作ってみた！】
【余談：なにもそこまでしなくても。】
【まとめ】
【「レスポンシブデザイン」って何よ。】
さて、まずは貴方にクエスチョン！
「今まさに、このブログを読むために使っている端末は何ですか？」
ネット社会なこのご時勢、HPはスマホ・PC・タブレット…と、時と場合によってあらゆる端末・あらゆる環境で見られるもの。かなり掻い摘んで言うなら、その「あらゆる場合で同じように（似た感覚で）見られるようにする」のが「レスポンシブデザイン」という考え方だそうです。リリース後も可変的な、Web業界ならではのデザイン思考ですよね。ただ、この辺は自分もまだまだ勉強不足なので、この説明の仕方は厳密な解釈と違う、のかも…？
もし詳しくお知りになりたい方は、一応以下を参考に執筆しましたので良ければご覧ください。ただ、結構技術的というか難解な内容が書かれていますので、最初の方だけ見てもらえれば十分かと思います。
※参考サイト：カゴヤのサーバー研究室様
つまるところ、今はHPひとつ作るのにも「PC（ブラウザ）で見る」「スマホで見る」「タブレットで見る」と、大きく分けても最低3パターンの方法を意識して作っていかなければならない…と。
「でもFacebookはHPじゃなくてSNSでしょ？」という貴方。私にもそんな時期がありました。
実はFacebookやTwitterなどのSNSでもこれは同じ。端末の機種やOSのバージョン、アプリなのかブラウザなのか、ブラウザに至ってはどのブラウザで見るのか…等々途方もない要因で見え方がまったく変わってしまうのです。
ではどう作ればベストなカバー画像になるのか。今回は単純な解説というより、具体的な制作手順を振り返るかたちでお話を進めたいかと思います。
【実践！ カバー画像作ってみた！】
まずは、それぞれの端末でどんな風に見えるのか、実際に比べてみましょう。自分はタブレットは持っていないので、PC（MacBook Pro）とiPhoneで。
一目瞭然、同じ画像を使っても端末・環境によって見え方（レイアウト）が変わっているのが分かります。PCで綺麗に見えるからといって、スマホで見ると大事な部分が見切れていた…というのは悲しいですよね。
そこで、最初に挙げた「レスポンシブデザイン」の考え方が活きてきます。つまりPCでもスマホでも、なるべく大事なところが隠れない「兼用可能なレイアウト」で画像を作れば大丈夫。
では、ここからはいよいよ実践編。Illustratorの画面も交えながら説明しますね。
レイアウト組みの参考には、こちらの説明が図付きで分かりやすかったです。
この上記参考サイトをお手本に、レイアウトの目安となる線を引きます（ガイド、と呼びます）。
ガイドラインを基に、PC・スマホそれぞれで表示できる範囲を割り出します。分かりやすいようそれぞれの表示範囲を塗りつぶし、色分けしてみたのがこちら。
中央のグリーンで塗りつぶされた部分が、どちらでも表示できる「安全圏」になります。オレンジやブルーの範囲は、環境によって表示されない可能性がある部分。
より分かりやすくするため、この塗り面と実際のデザインを重ね合わせてみましょう。
ギリギリではありますが、安全圏の中に切れてはならない絵や文字が収まっているのが分かります。
このように、実際に表示できる範囲を意識しつつ、画像全体で見てもバランスを損なわないようにパーツを配置するのは結構難儀でした…。既存のパーツを流用したとはいえ、海と空の青色がきちんと分かるように色を調節したりするのもまあ難しい。
更に辛かったのが、Facebookの画像アップロードに関する仕様。調べた限りでは、どうやらカバー画像を設定した時点でFacebook側が自動で画質を下げてしまうようで…。こちらで何をどう頑張っても綺麗な画像が載せられないのです。これについてはもうどうしようもないので、涙を呑んでそのままにしております。デザイナー根性的には、改善できるものならしたい部分ですが…！
そんなこんなで無事（？）リリースされたカバー画像。新たなクロノスの「顔」として、可愛がって頂けますと幸いです。
【余談：なにもそこまでしなくても。】
今回は難しい話だったので、最後にちょっとした小ネタでも。
実はこのデザイン、基本的に写真やフリー素材・絵文字アイコン等をIllustratorでトレース（下絵をなぞって描くこと）し、それらを組み合わせて作っています。このトレース作業、ツールを使いこなす訓練でもあるんですが、ついつい没頭してしまうんですよね。と言う事で…。
気付けばこんな誰も見ない所までがっつり描いてましたとさ。
ちなみにちゃんと名刺デザインに載せる段階から描いていたものです。勿論紙に印刷してある現物だとまったく見えませんけれど。やってる分には楽しいからいいんですけどね…まったく何してるんでしょうか（笑）。
【まとめ】
そんなこんなで、2023年最初の「おつD」でした。お楽しみ頂けましたか…？
年末年始は立て続けに新人さんが入所したり、ドッと色んな案件が動き始めたり、結構ドタバタしちゃってますが、個人的には何より「アトリエ∞」に新メンバーを迎えられたことが嬉しい！ 強力な仲間の力も相まって、いよいよアレやコレやが始動するとか何とか…？ 「アトリエ∞」今後の展開に乞うご期待です！ 次回の記事ネタが見つかるかどうかも必見です！（なお進捗…）
ここまでお読み頂きありがとうございました。
それでは、次回をお楽しみに！
2023.01.23
Follow me!
コメント