挿絵イラストを作成するときのポイント

資料、チラシ、広告などなど、内容をよりイメージしやすくするために、挿絵イラストを使用することがありますよね。
現在では多くの商用フリーイラストがあり、気兼ねなく誰でも使用することができます。
その一方で、「このイラスト見たことある」「○○の所のだ」「イラストがかぶってしまった」となることも少なくはありません。
特にイラストの種類が豊富であれば尚更多くの人が使用するわけですから、当然仕方のないことです。
ですが、提供してくれている方がいるから使用できていることは忘れてはいけませんね。

そこで、挿絵イラストを自分で作成してみてはいかがでしょう!
自分で作成することで、より内容に適したもの、他との差別化がしやすくなるかもしれません。
では、挿絵イラストを自分で作成するときはどうすれば良いのか、私の見解ですが作成するときのポイントを書いていきたいと思います!

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

point1.万人受け

挿絵イラストの前提として、「文章の補完、内容イメージの促進」があります。つまり見る人に、より理解してもらう為の手段の1つというわけですね。
また、挿絵はこうでなければいけないという様な決まりはありませんので多種多様なものを見かけます。

資料、チラシ、広告などによって挿絵のイメージ(絵のタッチ等)が異なることはもちろん、各々の内容に合ったものを使用する事が望ましいですよね。
その中でも共通して言えることは見る人を選ばない万人受けのものをなるべく使用することです。

※内容等、ターゲット層による場合がございます。

「なぜ、見る人を選ばない万人受けのものが良いの?」
「あくまでも挿絵イラストは“補助的な役割”であることを念頭に」

個人的な制作物であればさほど気にしなくても良いかもしれませんが、多くの人が見る可能性があるのであればそれぞれ思うこと、受ける印象は異なるので見てくれる人、出来る限り全員に伝わる様に最低限の配慮が必要です。

Aの方は大きな特徴もなく「小学生が楽しそうにしている」感を自然と後押ししてくれる印象を受けます。
Bの方は楽しそうにしている感は伝わるものの個性が強く、「小学1年生の遠足」という内容にはあっていない印象を受けますね。

挿絵を見た時に深く考えず、スルー出来るくらいの存在感がちょうど良いのではないでしょうか。

point2.シンプル化

多くの人が受け入れやすいイラストを一言でいうと基本的にシンプルなものと考えています。
シンプルなものは必要最低限の情報で構成されているため、誰がみても分かりやすく理解しやすい傾向があります。

■情報量が多い

それでは情報量が多いイラストはいかがでしょうか。
ほとんどのイラストは描きこめば描きこむほど複雑化していき、情報量が多くなることで個性が強くなっていきます。
(情報量が多くなることが悪いというわけではございません。)
見る人に考えさせる要素は極力抑えた方が、万人に受け入れてもらいやすいのではと考えます。

■目立つ特徴:指さしマークの場合

下記のイラストA、Bを見るとお分かりかと思いますが必要最低限、手と分かる範囲で描かれています。

そんななかBの方を見るとネイルが施されており、描きこみが少ないにもかかわらず、目立つ特徴があるため個性を強くする要因になっています。

一般的な指さしマークを考えた時に、爪にネイルをしているものはあまり想像しませんよね。
もしくは軽く爪が描かれている程度ですね。

※ネイルを扱うところであれば例外ですが…

情報量の多いもの、目立つ特徴を持つものは見る人を選んでしまうことがあるため、描きこみという名の情報量を抑えシンプルに、かつ明快にまとめられるかが重要ではないでしょうか。

また、個性が強くなるにつれてそのイラストに対する好き嫌いなどの感情が出やすくなる傾向があります。

point3.色、模様

特に色や模様(柄)に注力する必要が無い場合は、細かく表現しない方が情報量が少なくなり、見やすくなります。
例えば、白黒で使用されるものであれば、色が必要ない場合もありますし、色や模様よってはイラストがつぶれてしまったりすることも考えられます。

着色の仕方ひとつでイメージが大きく変化するため、あくまでもそれがなんであるかがわかる程度で表現をしてあげることをお勧めします。
特殊な着色の仕方を行うだけで、一見シンプルなイラストも個性を持ち存在感を放ち始めます。
どんな内容、ターゲット、公か私的かを見極めたうえで、適切なものを用意しましょう。

まとめ

■挿絵イラストは“補助的な役割”であることを念頭に
■見る人を選ばない万人受けを心掛ける
■挿絵を見た時に深く考えずスルー出来るくらいの存在感
■イラストの線の情報量は少なく
■色味、模様は必要最低限極力抑える
■白黒の場合はメリハリをつけてイラストを見やすく

自分がこれが好きだからという思想は一旦しまい込み、その内容に合うものを選定することが大切です。
補助的な役割である挿絵が「内容にあってないよね」と思われてしまったら元も子もありませんよね;
また、時には情報量の多いものや個性が強いもの等、内容やターゲットによっては相乗効果をもたらすこともあります。
作成するときには何に対する挿絵なのかをしっかり把握しましょう。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

ドロップシャドウ(影)とボカシ/濃淡のUI活用

『ドロップシャドウ』のほか、『ボカシ』と『透明度(アルファ)』をつかって、単純なグラフィックデザインの表現としてではなく『UI』の機能/優先度を補助する設定をしてみます。

今回の内容は、
この先である将来のUIの機能による表現を、手軽にCSSやプログラムで動的にインタラクションとして組み込んだ場合の想定ですのでご理解ください。

それでは早速ボタンUIを作ります。


ドロップシャドウの設定あれこれ

ボタン単体としてみると、Aのシンプルなドロップシャドウがない表現で十分に機能しますが、

実際には、バナー画像やサムネイル画像、テキスト本文が含まれる総合的な画面のなかでUIとして十分に認識でき機能しなければいけません。

ドロップシャドウの表現もCSSで細かく設定できます。

box-shadow: 2px 2px 4px 0px gray;

最初の「2px」部分はx座標、
次ぎの「2px」部分はy座標
次ぎの「4px」部分はボカシ具合
次ぎの「0px」部分はドロップシャドウの大きさ
次ぎの「gray」部分は色設定 ※「#000000」系の記述も可
末尾に「inset」をつけると影が内側に設定できます
※間は半角スペースを入れる

box-shadow: 2px 2px 4px 0px gray inset;

「,」(カンマ)を入れて複数ドロップシャドウを設定出来るので、「inset」でボタンの質感のテカリを再現、その他にドロップシャドウでボタンの影を設定もできます。

box-shadow: 2px 2px 4px 0px gray,2px 2px 4px 0px #ffffff inset;

↓値を変更することで、画像のAのようなパキッとした表現や、Bのようなボカシを設定して実際の影のような表現も段階で表現できます。

トレンドでは、影がさらにぼやけて広がり拡散した状態のドロップシャドウが、WEBデザイン、グラフィックデザインで多く使われています。

それでは複数課金のボタンUIでのドロップシャドウに、意味合いと優先度を設定してみます。

ドロップシャドウの表現を揃えれば、優先度は横並びとなり、上下左右の設置位置による些細な優先度だけが存在している状況です。

この並びのボタンUIにドロップシャドウのボケ具合の程度で差異を出すと、コントラストの違いにより、ボカシが弱く濃い左上のボタンの優先度が高くなります。

次に、
実際の影の付き方を再現して、ボタンに「高さ」と「奥行き」の距離感を設定してみます。

手前に飛び出て見える感もありますが、微妙な表現の違いにとどまっており、4つのボタンの優先度に大きな違いはありません。

さらに、
ボタンの面部分とそのボタンから落ちるドロップシャドウの距離を離して違いをだしてみました。

ここまでの表現は現在のブラウザCSSでも設定できますが、これから先の内容を動的インタラクティブなUIとして現在機能させるには、JavaScript/jQueryなどの重い処理を利用し疑似的に力技で処理する必要があり、ユーザー体験にも処理が重く読み込みに時間もかかりデメリットがあります。

今後のブラウザ側の機能追加とデバイス側の処理速度向上が必要です。


ボカシの設定あれこれ

「ボカシ」表現自体は、OSネイティブアプリレベルではホーム画面やsafariブラウザ上部領域の透かし処理などのエフェクト処理として確認出来ますが、WebのCSS3レベルでは、画像を部分的にぼかすことができず一部のブラウザのみ画像全体のボカシ処理にとどまっています。
※CSS3のfilter:blur(ぼかし)は現在SafariやGoogleのChromeなどのwebkitブラウザだけ実装されています

将来的には「視線追跡機能」等により、見ているUIパーツや優先度の高いパーツの「ピント具合」を動的に調節できる機能が実装されるとおもわれます。

他にも利用者が注力して見ている場所以外のレンダリング解像度を落とし、デバイスの処理を軽くすることでバッテリー持ちを良くしたり、閲覧レスポンスを快適にするなどUX向上メリットも期待できます。

それでは話を戻して「ボカシの優先度」をUIに活かして設定してみます。

この段階まで表現できて、やっと判断しやすい優先度に見えるようになりました。


濃淡(透過/アルファ)の設定あれこれ

最後の表現として「手前」「奥」の濃淡表現(空気遠近法)を対象UIパーツに透過/アルファの数値設定を行い、優先度の低いUIコンポーネントパーツの透明度を下げ視認性を下げてみます。

メリハリがでてわかりやすくなったところで、訴求金額の上下を逆にしてみると、また見え方が変わってみえますね;

ボタンの並び方を変更して大きさに遠近感を出すとこのような感じです↓

使いやすくユーザビリティに問題なくUIが機能できるかはこの表現が動的にインタラクションする必要があります。


さいごに

スマートフォンなどのUIにおける画面要素の「重なり構造表現」へ意識は、マテリアルデザインへの意識向上、新技術のデバイスへの組み込みにより今後さらに必要となってきます。

SF映画のなかで登場する「未来的でシンプルなUI」は、カッコいいけど簡素過ぎてわかり難いものばかりでした。今後、技術が追いついた時、それらについて適切な情報設計が出来るかどうかは、表現とUIデザインの意識次第なのではないでしょうか。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

2019/6/19~21 第2回 Web販促 EXPO【夏】出展のお知らせ(dgiftマーケティング/dgiftSNS)

2019年6月19日(水)~21日(金)に東京ビッグサイトで開催される、第2回 Web販促 EXPO【夏】に出展いたします。

今回はWebアンケート実施や来店を促進できる「dgiftマーケティング」と、SNSキャンペーン実施をサポートする「dgiftSNS」の2サービスをご紹介。

開催期間中はサービスの魅力を体験していただくためのイベント実施を予定しています。是非この機会にお立ち寄りください。

■会期:2019年6月19日(水)~21日(金)

■時間:6月19日~20日 10:00~18:00| 21日 10:00~17:00

■会場:東京ビッグサイト 西3ホール

■小間番号:西3-22-39


【dgift(ディーギフト)マーケティングとは】

SMS認証を用いたギフト付きアンケート機能で見込み顧客の情報を正確に取得。リアルタイムで回答状況の確認が可能です。

さらにWチャンス機能で店舗への誘引も行える、顧客開拓を支援するマーケティングツールです。

dgiftマーケティングのサービス紹介はこちら


【dgift(ディーギフト)SNSとは】

フォロワーの獲得やリツイートを促すための、デジタルギフト付きSNSキャンペーンサービスです。
新規顧客の獲得や既存顧客との関係性強化にお役立ていただけます。

女子度高め?映えるデザインのコツ

こんにちは!ユイPです。
れ、い、わ~令和になりましたね!令和もよろしくお願いします!
元号が変わる瞬間、世の中は年越しみたいで面白かったです。

今回の記事は女子度高めな「映える」デザインをするコツです。
昨今「インスタ映え」という言葉が流行り、街中や行楽スポットにもそれ向けのコンテンツが増えていますね。
デザインにも「映え」は重要です(時と場合によりますが)。

普段そういったデザインは、インスタグラム、女性誌、化粧品やファッションなどのWEBサイト…などからインプットしています。
そこから得た情報を私なりに、普段のデザインに落とし込んでいる際のコツをご紹介していきたいと思います。
とは言え映えや可愛いの基準は人それぞれなので、こんなのもあるんだな~というテンションで参考にして頂けたら嬉しいです。

point.1 文字よりもビジュアルで「映え」

例えばこの2つ、どちらが「映え」てますか?

左の方が情報量は多くてわかりやすいけど、カラフルなアイスをより全面的に押し出した右の画像の方が「映え」てませんか?
文字でつらつらと説明を書くよりもこうしてビジュアル重視の方が印象に残りやすくなります。

point.2 手書き風にしてみる

手書き風の文字やイラスト、雑誌やグッズなどでもよく見かけます。

こういうロゴも、右のように手書きフォントにしてみると印象が変わります。
もちろんデザインによっては左の方が適している事もありますが、手書きの方がラフな感じになりますね。

コラージュ風にするというアプローチも。
他にも、手書き風の人物のイラストが取り入れられているのデザインも近年よく見かけます。イラストを使ったデザインは華やか◎可愛さ◎ですね!

point.3 文字に+してみる

例えばこれは化粧品のブランドの紹介画像のイメージです。
それぞれ商品の名前に「CHERRY」「PEACH」「APPLE」の名前がついていますが…

文字だけでなく、こんな風にモチーフをアイコンにしてみました。
こうする事で、わかりやすくかつ可愛らしくなりますね~。イメージも膨らみます。
実際に化粧品には食べ物や飲み物の名前がついているものがよくあり、パッケージにもそれが印刷されていたりするので、そういったモチーフを取り入れたものが好まれるのかなと思います。

point.4 曲線を意識する

曲線や丸みのあるモチーフを使用すると直線よりも柔らかく、優しい印象になります。
これは映えというよりかは女子度が高くなるコツです。

丸く切り抜いたり角丸長方形を使ってみたり。
直線のラインではなくゆるくカーブさせてみたり。

四角を使ったデザインにしたい時も、角をちょっとだけ、ほんのちょっとだけ丸くするだけでもいい感じになります。

上が普通のゴシック、下が丸ゴシックです。フォントも角ばったものよりも丸みのあるものを使うと可愛らしく柔らかくなります。

point.5 色味

ピンク、黄色やベージュ、オレンジなど「暖色」の色を使うと女子度の高い「映え」を作る事が出来ると思います。
水色など寒色の場合は、彩度が高すぎないパステルカラーよりの色がよく使われている印象です。ミントグリーンなんかも人気ですよね。

■トレンドは「シンプル」「単色」?
昔、携帯をラインストーンでゴテゴテに装飾したり、プリクラの落書きがキラキラ!ギラギラ!だったりした時代があったかと思いますが…。
最近はそういうデザインよりも、シンプルなものがトレンドなのかなと思います。色数も多くなく、単色でデザインされたWEBページなどもよく見かけます(2019年現在)。
特に女性はめまぐるしく流行が変わるので、トレンドをチェックして取り入れていくのも大事ですね。

以上、ユイPがお送りいたしました!
五月病に負けないよう頑張りましょう。

ツイッターの方もよろしくお願いします♪
デジマースブログ公式Twitter

【公共サインのユーザビリティ】信号機のない横断歩道で車が一時停止する方法

こんにちは!
今回のテーマは「【公共サインのユーザビリティ】信号機のない横断歩道で車が一時停止する方法」です。
信号機のない横断歩道で自動車やバイクや自転車などの車両(以下、車)がちゃんと一時停止する方法について、ユーザビリティの観点から考えてみました。

信号機のない横断歩道を渡ろうとした時、なかなか車が途切れず渡れない…と困った経験をした方も多いのではないのでしょうか。
非常によくある光景ですが、これは車(の運転手)が間違っているんです。

そもそも、信号機のない横断歩道で歩行者や自転車が横断しようとしている場合、自動車やバイクや自転車などの車両は一時停止をして歩行者や自転車の通行を妨げてはいけないと言う法律があります。
日本自動車連盟(JAF)がこの実態を把握すべく、2018年に調査を行ったところ、全国でこの法律を守っている運転手は8.6%しかいないと言う驚きの結果が出ました。
<参考:日本自動車連盟(JAF)>

そこで、約9割の運転手がルールを守れていないと言うことは、運転手の知識やモラル以外にも何か原因があるのでは?と仮定し、なぜルールが守れないのか、この問題を解決できるように考えていきたいと思います。


信号機のない横断歩道を改めて見てみる

信号機のない横断歩道が、現状どのようなユーザビリティになっているか見てみましょう。
車側から見た時はこのようになっているのが一般的です。

横断歩道がある事を示す青い三角形の道路標識と、車道に連続した白いラインなど道路標示が描かれているのが一般的です。
ユーザビリティのポイントとしては、この「道路標識」と「道路標示」の2つが挙げられます。

一度、2つのポイントの基礎を整理したいと思います。

まず道路標識に関してですが、こちらは種類が4つあります。
「大人が1人描いてある物」「小さい子供が2人描いてある物」「自転車が描いてある物」「人と自転車が描いてある物」です。

どれも標識の位置に「横断歩道(または自転車横断帯)がある」ことを意味しています。
この標識がある場所は歩行者(または自転車)優先です。
子供が描いてある道路標識は幼稚園や小学校の周辺で子供が多く通る道に設置されているので、子供の飛び出しなど不規則な動きに一層注意したい所でもあります。

また道路標示に関しては、「歩行者が横断する白いライン」の他に、「車の停止線」「前方に横断歩道があるので減速を促す為のひし形のマーク」がある場合もあります。

ざっくりこんな感じで整理が出来たところで、次はそれぞれの問題点を洗い出していきたいと思います。


【問題点の洗い出し】

信号機のない横断歩道のユーザビリティ「道路標識」と「道路標示」には共通の問題があります。
それは、「一見しただけでは何を意味しているか分かり辛い」と言う点です。
横断歩道を全否定したい訳ではなく、より良いユーザビリティに繋がる可能性が秘められていると私は考えています。

例えば道路交通法の知識が1ミリもない人が車を運転した時、信号機のない横断歩道で連続した白いラインだけ見ても止まる事は出来ないと思います。
ありえない例えではありますが、このような観点から問題点を洗い出すと下記のようになりました。

「道路標識」の問題点

■ 絵が何を意味するのか分かり辛い。
■ 文字の情報が一切ない。
■ 色

「道路標示」の問題点

■ 文字の情報が一切ない。
■ 歩行者が渡りたいのか判断し辛い場合がある。


良いユーザビリティとは

ここで一旦、そもそも良いユーザビリティとはどのようなものなのか思い出してみます。
簡単に言ってしまうと、「分かりやすい」「簡単」「ストレスがない」と言った条件が満たされていると良いユーザビリティと言えます。

また一般的に、絵だけの情報より文字情報の方が理解されやすく、アクションを起こしやすいです。

横断歩道の良いユーザビリティとは「歩行者優先であることが分かりやすい」ことだと思います。
このような良いユーザビリティの観点を元に改善案を考えてみます。


【改善案】

「道路標識」の改善案


絵と文字で伝えます。
歩行者の絵の下に「優先」と書くことで、ぱっと見て歩行者が優先である事が分かりやすくなったのではないでしょうか。

補助標識を付けます。
絵の見易さをそのままに、文字の情報でしっかり意味を伝えることが出来ます。
ただこの場合、標識が複数ある場所だと見辛くなる可能性もあります。

警戒標識にします。
現在の横断歩道の標識は「指示標識」と言う物に分類されます。これは特定の交通方法を禁止したり指定する時に使われます。
「警戒標識」は危険な状態を予告し、注意して運転することを促す標識です。指示標識より強い警戒を促す事が出来ますので、車側が注意しやすくなります。

文字で伝えます。
文字だけにすることで歩行者優先であることが即座に分かりますね。


「道路標示」の改善案


歩行者優先と書きます。
シンプルですが分かりやすいですね。車に前方の横断歩道が歩行者優先であることを伝えられます。
道路標識と併用することでより分かりやすくなります。


横断歩道手前での一時停止を義務化します。
実現すれば一番確実で安全な方法ですが、交通量の多い道路では渋滞の原因にもなってしまいます。


おわりに

いかがでしたでしょうか?
ユーザビリティを少し変えるだけでも、歩行者優先であることが分かりやすくなりました。
そもそも車の運転手が道路交通法を守らなければいけないのですが、タイミングの問題でやむを得ず…と言う場合も多いかと思います。
マナーではなくルールであることを明示する、ユーザビリティを改善する事で、気付きのタイミングが増えたり認知度が改善する可能性があります。

実際に横断歩道のユーザビリティを改善する取り組みをしている国や地域もあります。

インドやアイスランドなどの海外では、「3D横断歩道」と言う横断歩道が導入されています。
トリックアートの原理で出来ており、遠くから見ると横断歩道が立体的に浮き出て見え、近付くと平面の横断歩道であることが分かる仕組みになっています。

細長い塊がいくつも並んで道を塞いでいるように見えるので、運転手が堪らずブレーキを踏んでしまうようなユーザビリティになっていてとても効果的です。
日本も静岡県や大阪府の一部地域で「3D横断歩道」が導入されているようです。

ぜひこれからも、注意を怠らずに安全で楽しい運転ライフをお過ごしください!
それではまた!デジマースのコンでした。

押したくなるボタンとは?UI目線で考えてみる

前に、「押せる画像・ボタンについて考えてみる」記事を書きましたが今回はそれに伴い、押せる認識がしやすくなったボタンを、ユーザーに押してもらえるようにするにはどうすれば良いのか。
気を付けるコツを個人的な解釈ではありますが書いていきたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

おさらい

サクッと簡単に「押せる画像・ボタンについて考えてみる」で紹介した内容をまとめてみました。

■押せない画像との差別化(左右のスペース)
・押せるボタンは画面横いっぱいまで使用せず画像の左右のスペースをあけるとべたっとした状態から浮き出てくるので差別化がしやすい。

■一目で押せると分かる様にする。
・三角マークで遷移できることを視覚化。「こちら」などのダイレクトな文言でも可。
・押せるものは角丸など。

■押せる画像は大きすぎると押せる=ボタンの認識が弱くなりやすい

■押せる色と押せない色をしっかりわけて設定することで、一目でボタンと認識しやすくなる

※細かく読みたい、気になる!方はこちらから読めます。
押せる画像・ボタンについて考えてみる

押したくなるボタンとは?①

上記のイメージ画像をみて「ボタン1」を押す際、分かり辛く、押し辛く感じる方が多いのではないでしょうか。
ボタンがギュッとつまっているので認識するのにも少々時間がかかってしまう気がします。

この場合どうすれば、ユーザーに押して貰える分かりやすいボタンに
なるのでしょうか。考えていきたいと思います。

・押せないものとの差別化、押せるマーク(>)を付けるなど、「押せるものである」と認識できる作りになってはいるが、ボタンの上下左右幅が狭く圧迫感がある。
・ボタンどうしが近いため誤タップを引き起こす可能性がある。
・引きで見た際に1つの塊に見えてしまう。

■ボタン周りのタップ領域を確保する
・ボタン周りがすっきりし、ボタンそのものがしっかりと見え、視認性がアップ。
・ボタンが上下左右並んだ際にも、タップ領域を確保することで誤タップ、押し辛さを回避。

個々のボタンをしっかり独立させ、ユーザーの目にとまり、押しやすい環境を作ることで必然と押してもらえる押しやすいボタンになるのではないでしょうか。

押したくなるボタンとは?②

上記のボタン、押せるマークがあるのでボタンなんだなと認識はできますが、押せるマークが無ければ、ボタンと認識し辛くないでしょうか。どちらかというとボタンではない別の画像に見えてしまいます。

どうしてボタンではない画像に見えてしまうのか、早速ですが見ていきましょう。

・ボタンに華美な装飾があることで見た目の情報量が多く、ボタンと認識し辛い。
・その他のコンテンツとの差別化がされ辛い。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

■必要最低限の情報量でシンプルに分かりやすく
・目的があって華美な装飾があるのであればこの限りではございませんが、装飾が強すぎるとサイト内のコンテンツとの差別化がし辛くボタンが埋もれてしまう場合も考えられます。

そのボタンの目的は何かを考えた上で、複雑にしすぎず伝わるものを用意する必要があります。ひとめ目につくだけでユーザーは装飾を重要視していません。

押したくなるボタンとは?③



パッと見て、フルーツの特集のバナーということが分かりますね。
視認性も悪くなく問題なく押せそうですが、よりユーザーへ伝わるものと考えたとき、上段の写真が入ったものが伝わる気がしませんか?

■上の写真が入っているもの
・訴求文言を補足するように写真のイメージが入っているため、今回の場合、実際にどんなものが「旬なフルーツ」に該当するのか、ユーザーがイメージしやすい。
・イメージが浮かぶと、ボタンを押して進む次のステップに入りやすく行動もしやすくなり結果的に押しやすいボタンになりやすい。

レストランなどのメニューで文字だけ書かれているよりも、合わせて料理の写真があった方が「これ、おいしそう!食べてみたい!」となりやすいですよね。

■下の写真が入っていないもの
・訴求文言の視認性は良いが写真イメージがないため、訴求文言を見ても、瞬間的にイメージはし辛い。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

押したくなるボタン

押したくなるボタンとは、目に見える形や配置の仕方など以外にも大切なポイントがございますので紹介していきます。



大半の方はAと答えるのではないでしょうか。
この場合、ユーザーメリットとして「無料」と書いてあるバナーの方が敷居が低くなるため、結果的に押しやすいボタンとなります。
もしも、ユーザーのメリットになる文言があれば簡潔に追記してあげた方が押しやすくなると考えられます。



大半の方はBと答えると思います。
この場合、スタンプが貰える点では同じ意味合いですが、そのための行動がBの方が負担が少ないですよね。Aの方は20個もアンケートに答えなければならないため、面倒くさいと感じる人が多そうです。
せっかく訴求している内容ですからユーザーに触れてもらいたいものです。そのためにはユーザーの視点にたって、スルーされない、見てもらえるものを考える必要がありそうです。



大半の方はAと答えると思います。
この場合、どちらも同じ意味をもつボタンになりますが、Aの方が、スッとボタンが目に入ってきますよね。
Bの方はボタンのサイズと載せている文言のバランスがおかしく、視認性、可読性が低下しています。
『押したくなるボタンとは?①』に記載しました“ボタン周りのタップ領域を確保する”のと同じで文言周りの視認性、可読性を保つための領域を確保する必要があります。

最後に

今回あげた内容は、ほんの一部にすぎませんが、ユーザーに押して貰えるボタンとはどんなものかを考えた時に、でてくるものは考えれば当たり前のことばかりです。逆に当たり前だからこそ見落としやすい部分でもあるので、運営者の好みではなく常にユーザー視点にたって考えることが大切になってきます。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

ロゴデザインの作り方_既存フォント使用と商標登録の注意点

ロゴとは

『ロゴ』とは、「サービス/商品」の名称をビジュアル化してブランドの顔としてつかった画像です。

商標登録するということ

『商標登録』とは、「名称」を他社が使用できない「唯一」のものとして商用利用する権利(「著作権」とは性質が違う)を登録、特許庁に認めてもらい使用することです。

ここで気付きますが、「既存フォント」を使用または要所を改変アレンジしてロゴとして使うことは、その時点でオリジナルではなく、「既存フォント」から派生した類似となり、そのまま『商標登録』を行ってしまうと著作権の侵害により金銭要求発生の可能性があります。

『商標登録』するロゴを「既存フォント」でつくる場合は、必ずフォント利用規約を確認してから著作権の持ち主に連絡、契約する必要があります。(そもそも権利を全て放棄した商標利用OKのフリーフォントを使用して「ブランドの顔」をつくることは適切ではありませんね)

ロゴタイプ向きなフォント形式

ロゴタイプは「英字」で作ると、シンプルにまとまり使いやすいですが、「和文」は「英文」に比べてデザインをクールにしにくい傾向があります。

また、「明朝体」は視認性の問題からロゴタイプには向きません。

「ロゴ」は広義なことばで、「ロゴタイプ」と「シンボルマーク」を内包します。

それでは「ロゴタイプ」をillustrator CCをつかい、画像中心に作り方を紹介していきます。

ロゴタイプの作り方


※細かい調整なため細部を拡大(スマホはピンチイン)して確認ください


※細かい調整なため細部を拡大(スマホはピンチイン)して確認ください

「錯視」についてはコチラの記事を参照ください。


以上で、一番基本的な文字構成で「ロゴタイプ」を作り、「シンボルマーク」と組み合わせて「ロゴ」にする作り方を紹介しました。
※線の「長さ」や「太さ」など説明用作ったため、多少大げさに誇張した表現になっています

さいごに

今回は比較的簡単な直線の組み合わせでロゴタイプを作りましたが、曲線を使う場合は「角度」や「長さ」「太さ」をルール化して統一化する決めの流れは今回と同じです。

今後、曲線や太さのルールが複雑なロゴの作り方も追記していきます。
デジマースのネモトでした。

文字デザインをしてみよう Vol.0 文字組みの基礎

こんにちは、ユイPです。
東京では桜が開花し始め、すっかり春の陽気になりました~。もうすぐ4月、別れの季節が終わって、新しい事が始まる季節ですね。

今回は文字デザインをする前の文字組みの基礎編です。
ロゴを作る以前に、文字を綺麗に見せる文字の扱い方やフォントについて書いてみたいと思います。

★文字デザイン本編 Vol.1 Vol.2

※今回は「和文」をベースとした解説を行います。


フォントについて

文字デザインをする上でまず欠かせないのが、フォントです。文字がメインとなるクリエイティブにおいてどんなフォントを選ぶかは1番重要なポイントじゃないかな?と思います。
和文フォントには代表的な2つの種類があります。「ゴシック体」「明朝体」です。

左がゴシック体、右が明朝体です。同じ画像でも、フォント一つでだいぶ印象が違うのがわかりますね。ゴシック体の方が目につきやすいけど、明朝体の方が画像にあっていて雰囲気が出ていると思います。

ゴシック体は縦も横も同じ太さが特徴です。明朝体は縦が太くて横が細く、ウロコと呼ばれる三角形が右端についています。
またゴシック体は「視認性」が高く、明朝体は「可読性」が高いという特徴があります。


Point.「視認性」と「可読性」について

視認性:目で見たときの確認のしやすさのこと
可読性:読みやすさの度合のこと


こういった文章の場合、見比べてみて本文の方は明朝体の方が読みやすいと思いませんか?
明朝体は線が細いので、読み手が疲れにくいそうです。確かに、ゴシック体の方ははっきりとした文字が続いていて長い文を読んでいたら疲れてしまうかも…ゴシック体が並んでいる紙と明朝体が並んでいる紙だったら、明朝体の方を手にとって読んでしまいそうですね。
ですが、パッと目につくのはゴシック体の方ですよね。なので、タイトルの部分、この画像でいう「こころ」の部分はゴシック体の方が適しています。
これらがゴシック体の「視認性」、明朝体の「可読性」の特徴です。

基本的に資料や、レポートなどはこのゴシックと明朝を使う事が多いと思われます。
プレゼンテーションなどに使う資料は視認性の事、そしてスクリーンに映すと文字が薄くなって細い明朝だと見づらくなる事などを考えてゴシック体を使う事が適しています。
逆にレポートなど文章がずらっと並ぶものは、「可読性」を考えて明朝体がいいですね。ゴシック体でも、太さを細めにするといいと思います。明朝は逆に太くしすぎないように気をつけましょう。

ゴシックや明朝とひとえに言っても種類がたくさんありますし、それ以外にもフォントの種類はたくさんありますね。

同じ文字でもフォント一つで雰囲気が変わるというのを伝えるために、同じ文章を色々なフォントを使って打ってみました。
ロゴなどを作る時は、イメージに合わせて色々なフォントを試してみると楽しいですね!

文字のバランスを整える

文字詰め

まずはこちらの画像をご覧ください。

同じフォントサイズで、全く同じ文章です。でも何か違いますよね。
上の文章は文章を打ったままのベタ組み、下の文章は文字と文字の間隔を詰めてバランスを整える「文字詰め」を行っています。
文字詰めは文字を扱う際に非常に大事なポイントになります。

文字詰めには「カーニング」「トラッキング」といった機能を中心に使用します。※Photoshop、Illustratorなどのソフトの場合


Point.「カーニング」と「トラッキング」

カーニング:隣同士の2文字の間隔を調整する
トラッキング:テキスト全体の間隔を一定に整える

文字詰め文字組みについての詳細はこちらの記事もご覧ください→たのしい文字組み 字間を調整してみよう


こんな感じで、文字の間隔でだいぶ印象が変わりますね~。

私が文字詰めを行う手順としては、まず文字全体に一度「オプティカル」もしくは「メトリクス」をかけます。※この2つの違いを細かく説明すると長くなってしまうので、気になる方は検索してみてください
その後に気になる部分をカーニングで一つずつ調整したり、全体の字間を広く/狭くしたい時にはトラッキングの数値を調整します。

文字の大きさのバランスを整える

フォントによっては、漢字と平仮名/カタカナの大きさが少し違ってしまっているものがあったりします(デザインフォント系に多い)。
強調するためにわざと差をつける意図がない場合には、それぞれの文字サイズを調整して一定の大きさにしましょう。

バランスがとれてより綺麗に見えるようになったのではないでしょうか。

逆に、一定のフォントサイズのものをあえて差をつけて目立たせたい文字を強調させるという手法もあります。
これはロゴなどの文字デザインをする際にオススメです。

「お母さん」「異世界」「転生」というキーワードが目立つようになりました。
文章やクリエイティブの種類によって適宜使い分けてみてください!


文字の扱い方については私が社会人としてデザインをやり始めてから最初に学んだ事でもあります。それくらい大事な事なんですね~。
文字詰めなど最初は慣れなくて、間隔がすごい空いているのに気付かなくて先輩に指摘されたりしていましたが…今では楽しくなって、誤差でしょ!って部分までこだわってしまう事もあります。フォントもこんなに種類によって差があるなんで気づきませんでした。

以上、「文字デザインをしてみよう Vol.0 文字組みの基礎」でした。
デザインはもちろん、資料作りなどにもこの記事の内容を役立てて頂けたら嬉しいです。
これからも楽しく文字と付き合っていきましょう~!明朝体大好きだけど困ったらゴシック体使いがち、ユイPでした。


■合わせて読みたい
タイトルロゴ風 文字デザインをしてみよう Vol.1
タイトルロゴ風 文字デザインをしてみよう Vol.2


■使用させて頂いたフリーフォント
「うつくし明朝体」 / フロップデザイン
「ラノベPOP」 / フォントな

■それ以外のフォント
モリサワフォント


★(ほぼ)毎日更新ゆるくツイート中
デジマースブログ公式Twitter

アニメ GIF の容量を軽くする方法【PhotoshopとAnimate】

こんにちは!
今回のテーマは「アニメ GIF の容量を軽くする方法【PhotoshopとAnimate】」です。

アニメ GIF は静止画を沢山表示させますので、どうしても容量がかさみがちです。
そんなアニメ GIF の容量を軽くするためにはどうしたら良いか、簡単な方法をPhotoshopとAnimateの場合でお話ししたいと思います。


何故アニメGIFを軽くするの?

そもそも何故アニメGIFを軽くする必要があるの?画質など最高の状態で表示した方が綺麗なのに…と疑問に思う方もいるかもしれません。
軽くする1番の理由は処理速度です。容量が軽い方が表示も早くユーザーが快適に使う事が出来るからです。
また、SNSや広告などにアニメGIFを使いたい場合、大抵の媒体は容量制限があります。作成したアニメGIFが容量が超過している場合は軽くする必要が出てきます。


アニメGIFを軽くする簡単な方法

アニメGIFを軽くする簡単な方法は大きく分けて3つあります。
「カラー数を減らす」「画質を劣化させる」「サイズを小さくする」です。

それでは早速作ってみましょう!
作業環境は下記のとおりです。

——————————————

■ Photoshop CC 2019
■ Animate CC 2019

——————————————


カラー数を減らす

カラー数を減らすとは、最もポピュラーで効果的な方法です。
単色の場合、容量は最も軽い状態になります。
カラー数が複数あったり、グラデーションを掛けたり繊細な描画を行っている場合は、その分データが増えますので容量も重くなります。

例えばコチラのアニメGIFを見て下さい。


単色のアニメGIFの容量は45KB、グラデーションの掛かったアニメGIFの容量は239KBで約5倍の差があります。

このように、とにかく容量を軽くしたい場合は単色が最も効果的ですが、デザイン的に単色だけでは難しい場合も多いかと思います。
そんな時は、アニメGIFを書き出す際にカラー数を減らします。

カラー数を減らす方法ですが、Photoshopの場合、「ファイル」→「書き出し」→「Web用に保存」で詳細設定パネルを開き、「カラー」を調整します。

Animateの場合、「ファイル」→「書き出し」→「アニメーションGIFを書き出し」で詳細設定パネルを開き、「カラー」を調整します。

それぞれカラー数は「256」「128」「64」「32」「16」「8」「4」「2」と8種類から選べます。
数字が小さいほどカラー数が減り容量も軽くなりますが、描写も荒くなっていきます。

場合にもよりますが、64までなら綺麗な状態で書き出すことが出来ます。
もっと容量を軽くしたい場合は32か16くらいまでが良いです。多少見た目に影響は出ますが、ある程度のディティールを保って書き出すことが出来ます。
8以下になると見た目が大きく変化してしまいますので、どうしてもの時以外はオススメしません。
2まで下げるとカラーが足りず形すら保てなくなっていますね…


画質を劣化させる

画質を劣化させるとは、GIFを構成するデータを部分的に破棄することで容量を軽くする方法です。
容量を軽く出来るメリットはありますが、大幅に劣化させると見た目が悪くなるデメリットもあります。

画質を劣化させる方法ですが、Photoshopの場合、「ファイル」→「書き出し」→「Web用に保存」で詳細設定パネルを開き、「劣化」を調整します。

Animateの場合、「ファイル」→「書き出し」→「アニメーションGIFを書き出し」で詳細設定パネルを開き、「非可逆圧縮」を調整します。

それぞれ劣化の度合いを0%~100%で変えられます。
オススメは5%~10%です。容量を軽くしつつ画質も綺麗に保てます。
20%まで行くと劣化の度合いが目視でもハッキリわかるようになります。30%以降はかなり荒くなりますので、容量と見た目の許容範囲を見計らってみて下さい。



サイズを小さくする

サイズを小さくするとは、アニメGIFその物のサイズ(横幅と高さ)を小さくして容量を軽くする方法です。
例えば、比率を変えずに全体を半分に縮めた場合、容量もザックリ言って半分になります。
また、余分な背景があればその部分をトリミングして、サイズを小さくする事で容量を少し減らす事が出来ます。


【Animate+α】HTMLで書き出す

Animateの場合、HTMLで書き出す事が出来ます。
アニメGIFではないのですが、HTMLにする事で同じ表現でも大幅に容量の軽いデータにする事が出来ます。

方法ですが、「ファイル」→「パブリッシュ設定」でパブリッシュ設定パネルを開きます
「JavaScript/HTML」の4つの設定項目、「基本」「HTML/JS」「イメージ設定」「Webフォント」の設定をします。

「基本」の項目が一番重要で、表示回数やレスポンシブの有無、書き出し方法などを設定する事が出来ます。
「HTML/JS」「イメージ設定」「Webフォント」は特に指定がなければデフォルト設定で問題ないかと思います。

「基本」の設定は、状況によりそれぞれ異なります。
今回は「簡単な図や動きなど全てAnimateで作成している場合」を例として、下記のような設定で書き出しました。

「イメージアセットを書き出す」設定でパフォーマンスなどに問題が出た場合は、「ドキュメントをテクスチャとして書き出し」の方にチェックを入れて下さい。

設定が終わったら「パブリッシュ」を押してHTMLとJavaScriptを書き出します。
容量が2つ合わせて14KBですので、とても軽くなりますね。

今回はHTMLとJavaScriptだけ書き出されましたが、Animate上で画像や音声を使用していた場合はその分のデータも書き出されます。

実際にHTML形式で書き出してこのページに組み込んだ物がこちらになります。




おわりに

いかがでしたでしょうか?
アニメGIFは容量が重くなりがちですが、PhotoshopとAnimateなら細かい調整をして容量を軽くする事が出来ます。

同じ物を作った場合、どちらで作った方が軽いの?と言う方もいるかもしれません。
人それぞれの作り方で差は出ると思いますが、どちらもあまり変わりませんので自分が使いやすい方を使うのが良いかと思います。

参考までに今回の例で言うと、PhotoshopとAnimateでほぼ同じ設定でグラデーションの球体のアニメGIFを作成した場合、Photoshopで作った方が30KBほど軽かったです。
また、HTMLで実装出来る場合は、Animateで作ったHTMLとJavaScriptが最も軽くなります。

作業環境に合わせてぜひ試してみて下さい!
それではまた!デジマースのコンでした。

自動改札で止まらずスムーズに通るには

自動改札を通る時に、何らかの理由で通れないことを経験したことがありませんか?
今回はそんな自動改札をユーザビリティ目線で個人的な解釈ではございますが考えてみたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

最初に

電車を利用する人は言わずもがな、たくさんいますよね。
その利用する人分、自動改札は通られています。
大半を占めて同じ時間に利用することが多い、学生、社会人を始めとし、多くの目的を持った人たちが利用しています。
利用者が多ければ多いほど自動改札の通り方にも個性が出てきます。

乗車券のタイプも電子カードタイプの定期券でピッと通る人もいれば、磁気定期券を使用している人もいます。通常の切符、またお得な切符販売もあるので切符を利用する人もいますね。最近ではスマートフォンで通る人も多く見受けられます。

それらを入れている入れ物も、スタンダードな定期券入れだったり、お財布、スマートフォンケース、ぬいぐるみキーホルダーのようなものであったりと様々なため、自動改札を通る時の人の動作も異なるのが予想できると思います。

幅広い年齢層、電車を利用する状況、自動改札を通る時の動作、乗車券の形態などが異なるのをひとまとめに受け止めているそんな自動改札に「止められてしまう時ってどんな時」なのか、そして自動改札で止まらずスムーズに通るには?どうすればいいのか冒頭に戻りますが今回はそんな自動改札をユーザビリティ目線で個人的な解釈ではございますが考えてみたいと思います。

自動改札で止められる時どんな時?

主に通れない場合の状況はどんな時か調べてみました。

*電子カードの残金が少ない
 ・通る時に確認していない
 ・後でチャージしようとして忘れていた
 ・足りると思った
*電子カードのタッチミス
*別区間の磁気定期券を入れてしまうなどのカード間違い

などでした。予想通りの内容です。
悪気はなくても、一度自動改札が閉まるとしまっている状態が解除されるまでに何秒かのブランクが出来てしまう為、特に朝など忙しない時間帯ですと後ろのお客さんがつまってしまって、申し訳ない気持ちになってしまうのではないでしょうか。

「何とか改善方法はないの?」
「一言で言ってしまえば、通る為の準備を抜かりなくしておくこと!ですね。」

そうは思っていても、完璧に残金を把握し続けることは人間難しいでしょうし、「残金大丈夫だろう」「急がなきゃ!」など思ってしまったらそのまま自動改札へGOしてしまいます。
油断したらタッチミスも発生します。それでは一体どうしたら良いのでしょうか。

利用シーン2パターン

どんな瞬間に自動改札を止めてしまうのか、よくある利用シーンから改善、対処法をユーザビリティの目線で考えてみました。

1.電子カードの残金が少ないことに気づかないまま自動改札へ向かう

このパターンは比較的多くの方が経験されているのではないでしょうか。
自動改札を通る前に券売機で残金を確認してみる、のも1つの手ですが頻度を考えるとあまり効率的ではありませんね。

手軽にだれでもすぐ残金が少ないこと、改め電子カードのチャージ金額に気づくための気づきのポイントがあれば…と思い電子カードをまじまじ見たところ、チャージ金額の残金が表記されていたらユーザー的には認識がしやすいのではないかと考えます。

ところでカード式の金券を、お店で使用したことはありませんか?
使用するとカードに後どれくらいの残りがあるかカード自体に穴を開け、ざっくりですが目で見てわかる様に工夫されていますよね。例えばカードを手に取った時に、足りない分を現金で払う準備の目安にもなります。

このように今回、電子カードの「チャージ金額」が視覚的に分からないことが、原因の1つではないかと考えます。
それならば…

現在の電子カードで実現できるかは分かり兼ねてしまいますが、もし改善案としてユーザビリティ目線から提案をするならば上記でも述べたようにカード式の金券のように電子カード上で、いつでも確認できる視覚情報を、用意してあげることで今回の「電子カードの残金が少ないことに気づかないまま自動改札へ向かう」原因の内と考えられる、通る時に確認していない、後でチャージしようとして忘れていた、足りると思った等のことが消化できるかもしれません。

2.電子カードのタッチミス

「根本的に自分が気を付けることが早いと思われますが…」

気を付けていても発生するのがタッチミス。自動改札のユーザビリティも視野に入れながら考えていきたいと思います。
以下に自動改札を用意しました。よく見る自動改札です。

タッチミスが考えられる要因として次のことが考えられます。

1.電子カードが財布などに入っており、タッチパネル部分に照準が合いずらい。
2.電子カードの周りに物があり(別のカードなど)センサーが届かない。
3.タッチが素早すぎて、自動改札からのレスポンスが追い付かない。
4.人が先に歩きすぎている。
5.そもそも電子カードを間違えた
6.手がふさがってしまっている状態でタッチし辛くて

などなど。タッチミスする人の中には、歩いている間に出てきた障害物(自動改札)かのように見ずに、流れで通る印象も少なからず感じます。
――――いくつか挙げてみましたが、個人の意識を高める事で解決の道へと向かう可能性が高いものばかりですが、人間意識を変えるのはなかなか難しいですよね。

「そしたら電子カードを手に握りしめ、タッチパネルに獲物を狙うかのようにタッチしに行けばいいの?」

そうできたら間違いはないと思いますが、そんな神経注いで自動改札を通るのは大変ですし…疲れてしまいます。
それではここで自動改札のユーザビリティを違う目線から考えてみましょう。単純に「電子カードを認識する」領域を広げてみてはいかがでしょうか。

《1》タッチ領域を広げてみる
的を広げることでユーザーに余裕をもたせる

《2》タッチ部分に追加して側面でも判定できるようにする
電子カードが何かしらに妨げられているためタッチパネルに
反応しないところを立体的に構えることで対応できるようにする

受け身を増やすことで、もしかしたら対応できるのではと考えてみました。タッチパネルの部分は広げすぎると後ろの人と同時にタッチしてしまう可能性があるので、難しい部分もあるかもしれませんが…的が広がることでタッチミスは減るかもしれませんね。

さらに飛躍してみた

今まで、現実的な目線も含めて考えてきましたが、もしこんなことが出来たら画期的、近い未来こうなると便利だなというのも含めていくつか提案してみたいと思います。

1.タッチミスはご退場

タッチミスをした際その当事者があたふたして後ろがより、つまることがありますよね。なので入口は1つですがタッチミスをした人には再タッチを不可にし、右に抜けてまた後ろに並んでもらうシステムなんていかがでしょうか。
メリットとして、後ろがつまりづらくなること、並びなおすのが大変と感じることでミスをしないよう心がけるのではないでしょうか。また、タッチミスで自分はうまいこと自動改札を抜け、後ろの人を待たせるパターンも稀にありますが、そのようなことの減少にもつながるかもしれませんね。
デメリットとして、抜ける分の幅を取ってしまうところでしょうか…。引っかかってもちょっと恥ずかしい…

両方向から利用できると便利ですが、思いのほかシビアな改札になりました。

2.歩くだけでOK!

※エラーの解決は考え兼ねています。ご了承ください。
歩くだけで判定してくれるシステムはどうでしょうか。床に判定システムがあるので、手がふさがっていたり、歩行の補助を持っている方、車いすの方でも安心して通れるのではと考えます。
(電子カードをそのまま判定させるのか、スマートフォンなどの別の何かを判定させるのかは考えどころですね)

3.個々の自動改札をなくす!

※エラーの解決は考え兼ねています。ご了承ください。
いっそのこと個々の自動改札をなくし解放感のある自動改札を考えてみました。
未来感があふれていますが、例えばスマートフォンや何かしらの電子端末に定期などの情報はすでに入っており別区間を利用するときは自動的に加算され、電話料金と同時に請求されるというもの。チャージする必要はないですね。

最後に

考えれば考えるほど、今の自動改札が「入場者のスピード制限」「乗車可能かどうかの判定」「整列入場」などのユーザーに対しての安全性も含めた考えられたものである印象が強くなりました。
これらが保たれたまま、より便利かつ効率的なものが今後出てきたら、嬉しいですが!今は周りのことも考えつつ、スムーズな通行が出来るよう一人ひとり心掛けることが大事と思います。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ