本記事はヌーラバーブログリレー2022の16日目の記事です。
こんにちはMakkyです。
この記事は「 ヌーラボ社内報「Nuton」はこうやってつくってます〜企画編〜」の続編です。
前回の記事に、Nutonの目的やコンテンツについて書いているので、そちらを読んでからこの記事を読むとより理解が深まるかと思います。
この記事では、ヌーラボ社内報「Nuton」の企画編に続き「Figmaデザイン編」を紹介します。みなさんも参考になるところがあったら参考にしてください。
最初の最初はBacklogのwikiでつくられた。今はFigmaでつくってる
前回の記事は企画やコンテンツについてフォーカスした話でしたが、ところでデザイン部分はどうやってつくってるのという部分が気になった人もいるかなと思います。
実は、この記事をつくろうと思ったきっかけは「NutonのデザインはInDesignでつくってると思ってた」と同僚に言われたというエピソードが元になっています。まあどうやってつくってるかみたいな話は言う機会もなかったし言ってもなかったのでせっかくなのでブログにしているという流れです。
ところでNutonの最初の号の話をすると、最初は2021年2月号でこの時はデザインを担当するメンバーは参加しておらず、有志2名で作成してBacklogのwikiにコンテンツを載せていました。
コンテンツは非常に面白く興味深い内容だったのですが、いかんせんWikiでつくった内容なので表現的に限界があり、コンテンツの魅力を十分に引き出せてなかったという印象でした。
Backlogのwikiに限らず、ドキュメント系のツールは誰でも簡単に書けるのですぐカタチに出来て良いのですが、いかんせん見栄えが今ひとつになりがちで社内報というコンテンツにはあまり向いていなくて、正直味気ないものでした。
社内報配布後、すぐに僕を含むデザイン経験者2名がデザインする必要性を感じ参加を表明しました。なので、次の号からデザインの大幅刷新が行われデザイン的にも見応えのあるものに変わっていきました。
ブラウザ上で作成・複数アートボート・ページ機能・同時編集・Auto layout…必要な機能がうまくハマったFigma
新しいデザインをつくる場合、どのツールを使って作業をするかというのがちょっと悩ましいところではありますが、Nutonに関しては特に話し合うまでもなくFigmaを使うことで決定しました。
Figmaを使おうと思ったのは業務で使っているデザインツールがFigmaだったからというのもありますが、単純に必要な機能をFigmaが実装してくれていたということが大きかったです。
ページ構成や大まかな作り方
構成
構成としては、日本語と英語版それぞれを月1回配布して、それを毎月行うため1年で24個の社内報ができることになります。やり方はいくつかあると思いますが、Nutonでは以下の様な構成で作成しています。
- 1年分を1つのFigmaファイルとしてまとめる（2021年Nuton、2022年Nuton…のような感じ）
- ページ単位で日本語・英語を分ける
- アートボードを複数並べてページを分ける
Figmaを使ってる人からすると、まあ想像通りの構成だと思います。意見が分かれる点があるとするなら「1年分を1ファイルにしている」「日英をページで分けている」という点ぐらいですね。
1年分を1ファイルにしている理由は、ページ数が多くなるとスクロール量が多くなりすぎて取り回しが大変になるので24ページぐらいで区切りたかったというのがあります。Figmaの機能的にページ数はもっと作成できるんですが、ページを表示している部分のUIはユーザー側で変更したり出来ない仕様になっているので、こういう感じにしました。
アートボードのサイズはA3相当の大きさで作成しています。これは印刷して配布したい時にA3で印刷すれば紙面での1ページがA4相当になることを見越しているためです。
日英をページで分けているのは、最終的にPDFにして書き出しをしているので、アートボードをまとめてPDFにする時に言語単位で分かれてたほうが良かったためです。今のところ個別のPDFに書き出ししか出来ないですが、選択したアートボードの書き出しを結合してくれるとありがたいなあと思ったりしています。
基本的に日本語原稿が出来てから英語への翻訳作業を行うので翻訳している間に少し時間が出来ます。なので日本語原稿が出来たタイミングでBacklog上で通知してもらって、日本語原稿を先にFigmaへ反映することが多いです。ちなみに日本語原稿を翻訳すると、ほとんどの場合日本語より英語の文字数が多くなる傾向があるのでそれを見越して日本語の文字数は少し少なめにしていたりします。
ただ、これでも英語原稿が入らない場合があるので、その場合は行間を狭くしたり文字サイズを小さくしたりして対応しています。
具体的なデザイン例：インタビュー形式（特集など）
ここから具体的なコンテンツを例にデザインの作り方のポイントを紹介したいと思います。（そのまま見せることは出来ないので似たような感じのサンプルで説明します）
インタビュー形式のコンテンツは基本的に「扉絵+インタビューの内容（顔写真+会話の内容）」みたいなフォーマットのデザインにしています。扉絵は今回の解説ではそんなに重要じゃないので割愛しますが、ここでポイントになるのは「インタビュー内容」です。
基本的にこういう感じのレイアウトになることが多くて、顔写真と文章を変更していけば完成するようなコンテンツになっています。
コンテンツの内容は、予め社内メンバーにインタビューして原稿を作ってもらいます。デザイン作業はその原稿を元にFigma上に文書や写真を当てはめていくような作業になります。
ここで便利なのが「文書変更を見越したAuto layout」です。
文書変更を見越したAuto layoutで編集作業が格段に快適になる
Auto layout機能の活用方法は色々ありますが、ここでは「間隔を保持したまま並び順を整えてくれる」という部分を活用しています。
何も設定していない場合では、文章量が変わってもそれによって周辺要素の位置が自動的に変わることはないので、文章量に応じて自分で周辺要素を移動させる必要があります。一見するとすごく地味なので、いまいち便利さにピンとこない部分もあるかもしれませんが、文章量の多いコンテンツでは変更する数が多いほどこの機能の恩恵を多く受けれるので作業が格段に快適になります。
上記画像のように、左のAuto layoutを使用していない場合は、文章を増やしてしまうと下の内容と重なってしまい移動の作業が発生してしまいます。これでは原稿にあわせて文書を入れていく度に移動させる必要が出てくるので、右のようにAuto layoutを使用することで文章が増えても下の要素が自動で移動してくれます。こうすることで、自分で移動する作業がなくなるため文章を変更するだけでデザイン作業が済むのでかなり便利です。
（雑な例えだとブログ上の文章を変更すると自動的に他の文章の位置も変わってくれるのに似ています）
デザイン作業と言っていますが、ここまで組んでしまうと実質テキストのコピペで済んでしまうのでFigmaの使い方を知っていれば誰でも変更が可能になるので、デザインスキルが無いメンバーでも簡単に更新作業ができるようになります。Nutonでもインタビューして原稿を作ったメンバーがそのままFimga上でページ作成して内容の変更まで行っていたりする場合もあります。
Paste to replaceで写真アイコンを一気に変更
さらに細かいテクニックですが「右クリック > Paste to replace」を使うことでコピーしているデータを置き換えることができるので写真アイコンなどを一括で変更できて便利です。
普通のペーストと何が違うのかというと、普通のペーストはペースト位置をコントロール出来ない場合があるのでペースト後位置調整の手間が必要になる場合があります。ペーストする数が多くなるとこれだけで結構な時間が必要になるんですが「Paste to replace」をすることで、選択した要素とコピーしているデータを置き換えることができるので位置調整の手間が丸々不要になります。
また、複数選択した後置き換えることもできるので、1アクションで全部置き換えることも出来てすごく便利です。
組み合わせることでもっと複雑なコンテンツを作れる
Auto layoutは単純な要素の並びをコントロールできる機能の他に、要素の周りのスペースをコントロールできるようにする機能などもあり、組み合わせると色々なコンテンツをAuto layoutで作ることが出来て文章量が変わるときを想定して柔軟なデザインを組むことができます。
上記の画像は「私の履歴書」というコンテンツのサンプルです。
こういう文章が組み合わさったデザインもさっき紹介したAuto layoutなど組み合わせると文字変更に対応できるデザインを組むことができ、作業効率が大幅にアップします。
インタビューコンテンツとほぼ同じですが、Auto layoutを活用することで途中の要素を削除したり逆に追加したりしても、他の要素は自動的に位置の調整が行われます。
これもAuto layoutの機能の1つですが、指定した要素の内側にpx単位でスペースを指定することが出来ます。（雑な例えだとCSSのPaddingに近い振る舞いをさせることができます）
このような組み方でデザインを作ることによって、途中の吹き出しの文章量が変化したり、会話ごと削除してしまっても文章のみを変更しても吹き出しのデザインは崩れずに良い感じに保ったまま調整してくれるのでコンテンツの変化に強いデザインを作ることが出来ます。
これらの仕組みを使うことでNutonのデザイン更新作業時間が体感で1/3ぐらいには改善されたと思います。
大事なのは「続けられる仕組み」と「反響の見える化」なのかもしれない
デザイン作ってるときはあんまり気にしてなかったですが、Nuton編集メンバーはみんな兼任しながら運営しているので、長く運営していくと別件の業務が忙しかったり一時的に運営から外れるような状況になったりとメンバーの状況で出来ることが結構色々変わったりします。
なので誰でもできるような仕組みになっていないと継続してやっていくのは結構難しく、それ前提で活動していかないと長く続けるのはかなり大変になるなと感じています。
実際にNuton編集メンバーも色々な事情で作業時間の確保が難しかったりしている場合もあるので、都度相談しながら運営しているような状況です。正直大変な時もありますが、Nutonを見てくれた同僚が社内チャットでNutonのコンテンツで盛り上がってるところをみると、やっててよかったなあと思う瞬間の1つですね。
こういう紆余曲折あって運営しているところもあり、最近では長く続けるにはどういう要素が必要なのかを考えるようになってきました。
立ち上げ当初は、基本的にメンバーもやる気に満ち溢れていて熱量高い状態ですし、周りの人も関心が高いので多くの人が反応してくれることが多いです。この状態がずっと続けられると良いのですが、経験上長く続くことはあまりなく、どこかのタイミングで「やっていることが日常になり、当たり前にある生活を知らない内に受け入れてる」状態になりやすいです。
本来であれば、社内報のような活動が当たり前のように受け入れられている状態は喜ばしいことなんですが、当たり前にある状態というのは裏を返せば、わざわざ内容に反応したりしないということにもなってしまって、読んでいて面白いのかそもそも読んでいないのか分からないという感じにもなったりしてしまいます。
こういうことを考えてると、誰かのためにやっていることなのに、実はあんまりやっている意味ないんじゃないかということが頭をよぎってしまって良くないんですが、事実として考えてしまうことの1つです。
長く続けるにはこういった悩みとのうまい付き合い方が見つけれると良いのかなと感じていて、その要素として「続けられる仕組みづくり」と「反響の見える化」なのかもしれないなと感じ始めています。
ここでいう「続けられる仕組みづくり」というのは限られた時間や人のリソースでクオリティを保ちながらどれだけ継続的に活動できるかを指していて、「反響の見える化」というのは運営していく上で編集メンバーのモチベーションだったり活動意義だったりを見失わないようにするための心の支えみたいなものかなと思ってます。
社内報は好き勝手にやっているようにも見えますが反響が見えないと虚空に向かって労力を使っているようにも感じる時があり「虚無の暗黒」が襲ってきてしまい、やってる側はこれに対してひたすら立ち向かうしかないという状況になってしまいます。
こうなってしまわないように、同僚に感想を求めるのもアリですが、読むことを強要しているようで気が引けるので読んだ人や読書維持率などをトラッキングできるようになると、表に出ない反響が見えるようになって良いですね。Nutonではそこまでやれてないので、今後できるようにしたいなあと思っています。
「続けられる仕組みづくり」については、今回記事にしたようなコンテンツ量のメリハリだったり作業上の効率化だったりをすることである程度仕組みがつくれるような印象です。
社内報自体は会社の売上に直接貢献するものではないので、会社として社内報の活動をやっていける土壌というか風土みたいなのはもちろん大前提にあるわけですが、それだけではなかなか続けられないというのがあるのも事実です。
贅沢な悩みだなと思いつつも、これからも長く続けられるようにNutonに関わっていけたらなと思います。
