公式サイトリニューアルについて② ［デザイン］
2022-11-19
こんにちはーどうもー。ゆきうえです。
制作に約半年をかけた旭操ラジオ公式サイトのリニューアルについての裏話をお話するシリーズ、シリーズ裏話リーズの第２回目です。
ちなみに第１回 はこちら。
第２回目の今回は、サイトのデザイン部分について話していこかなと思います。
一応僕の本業はデザイナーなので、サイトを作るにあたってどう作っているのか、どんな部分に気をつけているのかなど、これからWebデザイナーやUXデザイナー（一応UIデザイナー）を目指す方は参考にしてもらえるといいかもです。
とは言っても未経験からの新卒1年目のペーペーも甚だしいデザイナーなので、「ここは違うんじゃないか」って思ったバリバリ先輩デザイナーやディレクターの方がいらっしゃいましたら、お問い合わせフォームやツイッターのDMなどで教えてもらえると嬉しいです。
何を使ってデザインを作っているの？
基本的に僕がデザインの際に使っているツールは「Figma」というツールで、最近Adobeに買収されるというニュースで話題になった、現在一番勢いのあるデザインツールと言ってもいいくらいのデザインツールです。
Figmaの良いところ①
Figmaはの良いところは、無料で、ブラウザでもデスクトップアプリでも使うことができるので、使い始めるまでのハードルがめちゃくちゃ低い点です。僕がFigmaを知ったのは大学3年生の春休みごろだったのですが、お金のない大学生でもデザインを始めるまでに1円も、1時間もかかりませんでした。
Adobeの介入によって今後どのような使い勝手になるかは分かりませんが、2022年11月現在では間違いなく使えるようになっていて損はないツールなので、デザイナーになりたい方はもちろん、自分で何かを作り上げたいと思っている方はお手持ちのパソコンにインストールすることを強くおすすめします！
Figmaの良いところ②
使い始めやすいだけではなく、こんなことまでできるの！？という機能が豊富な点も Figmaの良いところです。
「拡張機能」というAdobe系のツールやブラウザのChromeにもある、ツールの力を120％にしてくれる機能がFigmaにはめちゃくちゃ豊富にあるんです。
画像の背景を１クリックだけで消しちゃったり、良い感じの写真をFimga上だけで見つけて貼り付けたりできるんです。
なので、PhotoshopやIllustratorを使わなくても、Figmaだけである程度のものだったら作り上げることができるので、今回の旭操ラジオのサイトのデザインにもFigmaを使いました。
ちなみに仕事の方でも僕はFigmaを使っていて、社会全体で見てもFigmaを使って事業を展開してる企業は意外に多かったりします。
ウェブサイトをデザインする時に気をつけたこと
デザインをするときに気をつけることなんて言ってしまえば死ぬほどあるし、気をつけるべきポイントはデザイナーや何をするのかによって変わってくるので、今回は旭操ラジオのWebサイトをリニューアルするにあたって僕が気をつけた部分を話していきます。
初めての人も何度も訪れてくれる人も楽しんでもらえるように
まずデザインをするときに考えるのは、「どんな人に使ってもらうのかを考える」ということです。
さっきデザインで気をつけるポイントは時と場合とデザイナーによって変わると言いましたが、ターゲットがどんな人かを考える、ペルソナを定義付けるというのは、ほぼほぼ全ての場合に当てはまるかと思います。（例外もあるのかもしれないけど、僕は知らない）
旭操ラジオのWebサイトの存在意義は、
- 旭操ラジオという存在がどんなものなのかを知ってもらうこと
- 旭操ラジオというコンテンツを楽しんでもらうこと
の２つです。
これを前提にターゲットとなるユーザーを考えると、
- 初めてサイトに訪れてくれる人
- 何度も来てくれて、ブログだったり新エピソードを聞いてくれている人（画面の前のあなたみたいにね😉）
の２つになります。
基本的にデザインをするときは、作るものの軸がぶれてしまわないように、ターゲットを１つに絞ることが多いです。本音を言ってしまえば、Webサイトまで来てくれる人なんてほとんど旭操ラジオがどんなものか知っているでしょうし、ターゲットをひとつに絞ることもできました。が、このWebサイトは今後の旭操ラジオの顔になるものでもあるので、初めましての人にも良いカッコができるように絞りませんでした。
ただ、「ブログ機能を付けたい」っていうのがリニューアルに至ったきっかけだったわけで、「何度も来てくれる人が楽しんでくれるように」っていうのが一番の大きな目的なわけです。
なので、上の２つのターゲットがおんなじくらいの優先度というわけではなくて、何度も来てくれる人のほうにどちらかというと重きをおいている感じです。
サイト全体のルールを決めて極力例外を作らない
複数のページで成り立っているサイトはそのサイト全体をみてデザインをしていく必要があります。
例えば、トップページではボタンに色がついていたけど、別のページではボタンに影（シャドウ）がついていたら、どれを押していのかどれがボタンなのかわからなくなっちゃいます。
何度も使っている人だったらこれがボタンで、これはボタンじゃなくてって判断できるかもしれませんが、そんなに何度も何度も使うものってあんまりないんですよ。仕事で使わなきゃいけないものだったり、自分の意思があまり介入できないものについては使っていくうちに慣れるかもしれませんが、通常であれば使いにくいと感じた時点で、もう二度と使うことはまずありません。
なので、使いにくい、なんなら使えないと思わせてしまうことはサイトの存在意義を根本から崩しかねない重要な問題で、絶対に回避しなければいけないので、サイト全体のルールを決めちゃおうというというわけです。
旭操ラジオの公式サイトでも、ボタンには影をつける、画像は黒線で囲むといったルールが存在しています。どんな法則があるのか是非サイトを見て回って確認してみてください。
今回のリニューアルではデザイン的にやりたかったことでも技術的にできなかった部分もあります。どうか怒らないで今後のリニューアルをお待ちください。。。。
とはいえ、ルールを決めちゃえばなんでも良いというわけではなくて、ルール自体が終わっていたらどんなにルールに則ったものでもゴミです。男の人なら経験したことがあると思うんですけど、突然現れる広告とか一定のルールに則っているはずですが、良いと思ったことはありませんよね。あんな感じです。
なので、ルールがちゃんとしているかどうかも確認しつつ、全体のルールを決めていくというのが大事ですね。
ほんとはまだまだ話し足りない部分があるんですけど、長くなっても読むのがしんどいでしょうし、デザインについてはここまでにしておきます。
もし「ここはどんな思いで作ったんですか？」と言った質問があれば答えていこうと思うので、ぜひお便り・感想フォームやツイッターのDMなどでコメントください。
もちろん、「ここはもっとこうしたほうが良い」とか「ここが使いにくい」と言った部分があれば、そちらも教えていただけると改善していくので、ぜひアドバイスお願いします。
さて、今回は公式サイトリニューアルのときのデザインついてお話しさせていただきました。
デザインって奥が深くて、面白いなと思いつつも、まだまだだなあと思うことがたくさんありますね。
これからも精進していくつもりですので、アドバイスやコメントいただけると嬉しいです！
次回は、イラストと動画について話すつもりなので、お楽しみに！..?
面白いと思った方は、ぜひ仲のいい周りの方に旭操ラジオの存在を紹介してもらえるとめちゃくちゃ嬉しいです🥹
それじゃまた別の記事やエピソードでお会いしましょ、またね。
