会社紹介スライドを整えていくよ
-
- いいね！0
🍺kotanis：UI/UXデザイナー
@_kotanis
オトバンク採用情報＆会社資料が公開されました！ 今週業務としてこの資料のブラシアップを任されていて、せっかくなのでTwitterでどういうところを調整して仕上げていくか弊社PRも兼ねて実況しながら作業を進めようかなと。 #会社資料調整 note.com/otobank/n/n0d5…
2021-01-12 16:46:23
オトバンクはaudiobook.jpを運営している会社です
🍺kotanis：UI/UXデザイナー
@_kotanis
工数的には6時間〜10時間程度なのでできることを考えます。おそらく、テンプレを作ってそれにコンテンツをはめていく、画像や図をトーンにあうものに変更＆作成という感じかな。現状でも資料としてはわかりやすく成立しているので、手を加えるといよりかは、整える方向ですすめます。 #会社資料調整
2021-01-12 16:51:49
🍺kotanis：UI/UXデザイナー
@_kotanis
デザイン制作するまえに、まずはアイデア探し。割と何をするにしても調査からやるタイプです。 #会社資料調整 / 会社資料作成するにあたって参考にしたいかっこいいスライドメモ｜コタパカ @_kotapaka #note note.com/kotapaka/n/n7c…
2021-01-12 19:37:00
🍺kotanis：UI/UXデザイナー
@_kotanis
色まわりのガイド(ようやく)定めました！ ブランドカラーとグレースケール(文字色)が整えばスライドがそれらしくなります。ポイントカラーはロゴマーク左の緑にしようかな、会社の雰囲気はどちらかというと左の緑色に近いです。 #会社資料調整 pic.twitter.com/KYI4RyzAaY
2021-01-14 10:47:16
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
スライドのページ数、手動ではなくてgoogleスライド機能のものを利用します。自動で更新されるし、コレ以外の手段はデザインに依存したり拡張の工数が増えがちなのでさくっと適応するとなにかとはかどります。 #会社資料調整 pic.twitter.com/33V6pN7Rk1
2021-01-14 10:59:37
拡大
まずは基本の情報を整えるところから
🍺kotanis：UI/UXデザイナー
@_kotanis
写真＋タイトル＋テキスト の標準的なスライドでテンプレを思案します。調整は文字サイズと行間、各種配置、会社ロゴはコンパクトな横並びに変更して右上へ、背景ロゴは廃止してブランドカラーのラインを引きました。 このテンプレで他のページも対応できるか、確認していきます。 #会社資料調整 pic.twitter.com/nJbjcFU3WQ
2021-01-14 12:04:06
拡大
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
会社概要は箇条書きではなく表に収めました。社名が見出しっぽくなっていたのですが、情報として整理しておきたいので他の項目と同じように扱っています。 写真もいっぱい表示ではなく、他のスライドと揃えるためにサイズ感を調整。会社概要っぽくなったかな😊 #会社資料調整 pic.twitter.com/gAj0pHdQwN
2021-02-02 12:08:30
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
テキストの行間を整え、見出しを右側に添えに変更しました。見出しは本来1文ぽかったのですがそれぞれ意味が強いことを行ってる（1文にするのもったいない！）ので分けて配置してます。 また、テキストは細めなものを選択しより強調が目立つような文字組になるように調整しています。 #会社資料調整 pic.twitter.com/BePPMBt4is
2021-02-02 13:39:19
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
見出しと目次と、ついでに表紙はこんな感じで整いました！ pic.twitter.com/aeJQYNBiBH
2021-02-02 17:53:30
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
プロダクトのページ、もっとリッチにして良い判断をしアイキャッチ、サービス概要、ビジョンの３枚に分離しました。 過去のものは色々と情報が乗っていたので１情報につき１スライドに置き換えたイメージです。 #会社資料調整 pic.twitter.com/wP4cpaUjFN
2021-01-14 18:23:52
拡大
拡大
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
テキスト+画像のページでの表示ルールを右テキスト、左画像で定めました。 テキスト類は中央寄せ、左寄せなどを多用せず、左寄せがなんだかんだ一番読みやすい。タイトルや見出しも揃えられるのなら全部左に揃えておくと目線があっちこっちいかないのでぐっとスッキリします。 #会社資料調整 pic.twitter.com/nssz9izkqW
2021-01-18 17:11:40
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
サービス利用のスライドは、「なにを提供しているか」と「それを利用するシチュエーション」で2枚に分けました。 「サービス利用」と言ってた見出しの文言ですが、サービス名を認知してもらいたいので「audiobook.jp」に変更しています。 #会社資料調整 pic.twitter.com/mjdA7ZWVYI
2021-02-02 16:57:37
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
今回の資料は見出し＋テキストのタイプが多かったので、スタイルを統一するために結論が最後になっていたテキスト類の文字構成を変更しています。スライド全体のトーンを揃えるため、ですね。 #会社資料調整 pic.twitter.com/5BelvyefZ6
2021-01-18 17:18:36
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
だいたいのページ、見出しが２つある状態だったので大見出しのページを作り、セクションを分けることで見出しを一つ減らす試みをしています。スライドが分けられるようになったので、 最終的には目次を作り、目当ての情報にアクセスしやすくなる！も狙っています。 #会社資料調整 pic.twitter.com/3ZuSyzTuJ3
2021-01-18 17:23:32
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
同じ言葉が使われている場合はできるだけ省いて整理します。それぞれの工程のグルーピングを優先し、手順をブロックごとに伝えられるように整えます。あんまり色は多様しないで、揃えたほうがいいですね。 画像はあとで、テキストはまだ調整したほうがいいやも。#会社資料調整 pic.twitter.com/FIirVXVOk8
2021-01-18 18:09:17
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
カテゴライズは別でも同じ軸で伝えていることなので、色合いを同じにし、アイコンを付けることて差別化＆認識しやすくしました。 会社ロゴが資料にアイコンとして表示されていますが、資料はすべて会社についてのものなので、ロゴは取り除きました。 #会社資料調整 pic.twitter.com/g2248FWR1w
2021-01-19 17:57:40
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
前回に引き続き、図に含まれる会社ロゴを省きます。横並びにして縦だと優先度がつく(ように見える)ので横並びに変更し、サービスロゴかアイコンなどを置くスペースを確保しました。読ませたいテキストは優先度を上げるために上部に配置します。 #会社資料調整 pic.twitter.com/uOLmj1Fp6j
2021-01-20 18:44:41
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
その②として似たような情報がつづくのでスタイルを揃えます。「移動中」という言葉をより目立たせるために、連想できるようなイラストを配置します。見てもらいたい図よりめだたないように控えめに。 #会社資料調整 pic.twitter.com/wdh7TXk2K4
2021-01-20 18:46:33
拡大
スライドに載せた伝えたい内容を、シンプルに読みてに伝わるように調整
🍺kotanis：UI/UXデザイナー
@_kotanis
資料において、読み手にちゃんと書かれていることが理解できるか、想像できるかを重要視しています。 なので、代表者の想いについても代表者がどんな人なのかイメージしやすいように、お写真を追加しました。 #会社資料調整 pic.twitter.com/PGeH0c9Clc
2021-02-02 17:00:43
拡大
🍺kotanis：UI/UXデザイナー
@_kotanis
採用のスライド、メンバー待ってます🙋♀️感を出すために社員をイメージしたイラストを追加し、プロダクトの画面とロゴを表示するようにしました。 会員数突破したという文言はテキストにおさめています。 #会社資料調整 pic.twitter.com/jyWIsrl2Oe
2021-02-02 17:30:30
拡大