こんにちは！ KEPPLE CREATORS LAB（以下ラボ）の UI デザイナー 川口です。
ケップルのデザイナーとして、日々社内の様々なデザインを作っています。
デザイン作成時は、IllustratorやPhotoshop、Figmaなどのツールを利用しています。
時には非デザイナーの方が編集権限を持った状態でファイルを納品する要望もあり、今回はそのデザイン作成で考えていることをブログに書こうと思います。
よく依頼を受けるのは、記事やイベントのサムネイル、スライド、レポートなどです。
特にケップルではスタートアップメディア「KEPPLE」やスタートアップデータベース「KEPPLE DB」などのスタートアップに関する情報を発信するプロダクトがあり、毎週、毎月配信するものもあるためクイックに画像が必要になります。
依頼者とデザイナー間のやり取りの時間、業務の優先度的に素早く対応できない場合もあるためデザインをテンプレート化し、必要な部分を編集できるようにしています。
一緒に利用するツールとの相性や最終的な成果物に合わせてツールを決めていますが、多くはGoogleスライドを利用することが多いです。
Googleスライドで作成時に意識している3つのポイントを紹介します。
1.使いやすさ
利用者の学習コストを考慮し、Googleのツールをメインに利用しています。
デザイナー、非デザイナーのお互いが利用したことがあるツールのため、難なく操作することができます。
2.運用のしやすさ
デザインを作成後は、非デザイナーの方に利用してもらいます。
利用する上で困らない、クオリティを維持するためにガイドラインを作成しています。
ガイドラインの内容
- テーマの登録
- 表紙、中表紙、本文などの装飾があるページはテーマに登録し、新しいスライドを作成しやすくしています。
- ガイド線の追加
- 上下左右の余白を確保するために設定します。
- カラーパレットの登録
- デフォルトのカラーではなく、オリジナルのカラーを利用する場合は、カラーパレットに登録し、色に統一性を出しています。
- カラーの用途を記載しています。
- フォントサイズの指定
- 行間の指定
- カスタム数値を利用することもあります。運用に負担が出るかもしれませんが、レポートなどの読み物に対しては可読性を優先します。
3.見栄え
IllustratorやFigmaと比べると、できることが限られますが、なるべく見栄えを整えたいものです。
ページの装飾はIllustratorで制作したものを画像で書き出し、背景として使用しています。Googleスライドの方ではテキスト、カラーの扱い方を意識しています。
- レイアウトを揃える
- 文頭を揃えやすくするために、書式設定でテキストボックスのパディングを0にして利用しています。
- カラーの用途を決める
- カラーを使い過ぎてしまうと、情報の重要度や全体の統一感が失われるため、ガイドラインに用途を記載しています。
- 特にアクセントカラーについては使い過ぎないように用途を絞っています。
- 可読性を高める
- 行間によって読みやすさがかなり異なるため、カスタムで数値を設定するなどしています。
ここまで読んでくださりありがとうございます！
まだまだ改善できることがあると思うので模索を続けていきたいと思います！
