6月13日(金)は、11:30からの営業といたします

平素は格別のご高配を賜り厚くお礼申し上げます。

6月13日(金)は、社員研修のため、11:30からの営業といたします。
ご迷惑をお掛けいたしますが、ご理解とご協力の程よろしくお願い申し上げます。

【お問い合わせ対応】

6月13日(金)11:30までのお問い合わせにつきましては、6月13日(金)11:30以降のご返答とさせていただきます。
何かとご不便をお掛けいたしますが、よろしくご了承のほど、お願い申し上げます。

【緊急対応について】

弊社サービス(ウルトラASP、ウルトラASP for 楽天市場、らくらく在庫、らくらく最安更新、らくらくーぽん、らくらくフォロー、IMG-UP)をご利用で、緊急対応が必要な場合は、恐れ入りますが各サービス窓口までメールをお送りください。

今後ともグリニッジ株式会社をどうぞ宜しくお願いいたします。

グリニッジ株式会社

新規プロジェクトに携わって

皆様、こんにちは。グリニッジのサウナーことコサカです。最近すっかり暖かくなりましたね。

今回の投稿では、昨年から始まった新規プロジェクトで、サポート担当としてジョインした際の経験談を少し書かせていただきます。
私の準備不足もあり、いろいろ苦労した部分もありましたので、反省も踏まえ、自分の対応したことや改善点などについて記載したいと思います!

新規プロジェクトで対応したこと

・FAQやマニュアルの作成
・社内マニュアルの作成
(ざっと数えてみましたが、マニュアルだけで20~30件近く作ってましたw)
・社内対応フローの構築(POに手伝っていただきながら、対応しました)
・顧客への導入サポート、問い合わせ対応
・メールのフォルダ作成、振り分け設定
・進捗表の作成、管理
・パートナー企業との打ち合わせ(新規プロジェクトの後半から)
・ウェビナーの登壇
...etc

箇条書きで書いてみましたが、普段のサポート業務に追加で上記を対応しておりました。

工夫したこと

ゼロベースでマニュアルを作るとなると、かなり時間と工数がかかってしまうため、マニュアルのサンプルなどを周囲の協力を得ながら情報収集することから始めました。

結果として、ゼロからマニュアル作成する場合に比べて、半分くらいの時間でマニュアル作成することができたかと思います。

また、プロジェクトのテーマとしても「LINE」を活用したものになるため、専門用語や操作画面などが初見の方にも伝わりやすいよう意識してマニュアル作成を行いました。

反省点

新規プロジェクトの開発スケジュールは共有されており、私のタスクとして対応すべきことは概ね明確になっていましたが、計画的にタスクをこなすことができず、機能のリリース直前で慌てて作業する場面もありました。

メモ帳に書き出す、マインドマップやRedmineを使うなど、タスク管理するための手段はあるのにそれを怠ってしまったことが、一番の反省点ですね。

機能が正式リリースされてからは、顧客サポートに時間を割くことが増えるため、リリース前に進めておけばよかったと思うタスクが多々あり、後悔しております...。

まとめ

POやプロジェクトメンバーのおかげもあって、無事リリースできましたが、それに至るまでの道のりで反省点も多く見られましたので、これらの反省を踏まえ、自分が楽するためにも、納期に向けた自身の対応スケジュールを組み立てて、計画的に業務するよう心がけたいと思います。

最後になりましたが、私が担当してたプロジェクトについて紹介している記事がありますので、ぜひ覗いてみてください!!

【プレスリリース】楽天市場専用のレビュー施策システム「らくらくーぽん」メール機能に加えて「LINE機能」を新たに追加

~レビューも増えて、LINE友だちも増える~

グリニッジ株式会社(本社:東京都港区、代表取締役:田中 裕之)は、楽天市場専用のレビュー施策システム「らくらくーぽん」において、「LINE機能」を新たに追加し、提供を開始しました。

「らくらくーぽんLINE機能アップデート」詳細:https://coupon.greenwich.co.jp/line

「LINE機能」追加の背景

近年、LINEはメールと比較して開封率が高く、友だちに確実に届くコミュニケーションツールとして注目されています。しかし、多くの楽天ショップではLINEの活用が進んでいないのが現状でした。

「らくらくーぽん」に「LINE機能」を追加することで、従来のらくらくーぽん機能に加え、「友だち追加の促進」 や 「あいさつメッセージ&友だち追加クーポン」、「フォローLINE 」「クーポンLINE」までを自動化。

これにより、LINE友だちが増えやすくなり、レビュー獲得やリピート率の向上、さらに売上アップにもつながります。

■「らくらくーぽんLINE機能」特徴

<友だち追加と楽天会員連携を同時に行う>

商品購入後に送られるフォローメールに記載のURLから、ワンクリックで「友だち追加」と「楽天会員連携」を同時に完了。
新規の友だちを増やしながら、同時に楽天会員情報と紐づけます。

<あいさつメッセージ&友だち追加クーポン配布>

友だち追加された際に、お礼のあいさつメッセージとクーポンを自動で送信!
クーポン自動発行で作業コストを削減しつつ、新規購入を促進できます。

<楽天会員連携済みの友だちにフォローLINE&クーポンLINE>

購入後のフォローメッセージやクーポン配信をLINEで自動化!
【フォローLINE
配送完了後に「レビュー投稿のお願い」メッセージを送信。LINEの高い開封率を活かし、レビュー投稿率UP!
【クーポンLINE】
レビュー投稿後に、お礼としてクーポンをLINEで送信。リピート購入を促し、売上アップにつなげます。

■「らくらくーぽん」概要

サービス名 : らくらくーぽん

サービス内容: 楽天市場専用のレビュー施策システム

価格    : 10,000円 (税別)

URL    : https://coupon.greenwich.co.jp

※らくらくーぽんをご利用いただくとLINE機能も無料になります。

■無料トライアル特別キャンペーン実施

2025年4月17日から5月31日まで限定。

・らくらくーぽん LINE機能アップデート

<通常トライアル45日間のところ60日間無料>
https://coupon.greenwich.co.jp/trial

※備考欄に「coupon2025」をご記入のうえ、お申し込みください。

【会社概要】

グリニッジ株式会社

代表者:代表取締役 田中 裕之
所在地:〒105-0004 東京都港区新橋一丁目16-4りそな新橋ビル8F
設立:平成15年5月26日
事業内容:EC・WEBソリューション(コンサルティング・制作・システム開発・運用)
ホームページURL: https://www.greenwich.co.jp

■本件に関するお問い合わせ先

グリニッジ株式会社

担当:インサイドセールス 塚部一貴 (つかべ かずき)
MAIL:inside-sales@greenwich.co.jp
TEL:03-5510-7260
FAX:03-5510-7296

【プレスリリース】楽天市場専用レビュー対策システム「らくらくーぽん」新機能「LINE通知メッセージ」をリリース

~注文完了からクーポン配布までLINEで一気通貫~

グリニッジ株式会社(本社:東京都港区、代表取締役:田中 裕之)は、楽天市場専用のレビュー施策システム「らくらくーぽん」において、新機能「LINE通知メッセージ」を2025年4月1日にリリースしました。

「らくらくーぽんLINE通知メッセージ」詳細: https://coupon.greenwich.co.jp/message

■「LINE通知メッセージ」機能追加の背景

近年、LINEはメールと比較して開封率が高く、友だちに確実に届くコミュニケーションツールとして注目されています。しかし、多くの楽天ショップではLINEの活用が進んでいないのが現状でした。

「らくらくーぽん」に「LINE通知メッセージ」機能を追加することで、ショップがユーザーの電話番号を指定してメッセージを送信でき、「友だち未登録のユーザー」にも直接アプローチが可能になりました。

■「らくらくーぽんLINE通知メッセージ」特徴

<友だち追加と楽天会員連携を同時に行う>

ユーザーにストレスをかけることなく、楽天会員とLINEIDをスムーズに連携できるため、友だちが増えるだけではなく、楽天会員連携済みの友だちも増加します。

<LINEを活用した売上アップの好循環>

「注文完了→発送完了→レビュー依頼のフォローLINE→レビュー投稿者にクーポンLINE」までの流れを自動化できるため、友だち増加、さらにレビュー増加&リピーター増加で売上アップを実現します。

<低コストで友だち獲得&ブロック率軽減>

従来の友だち獲得施策(友だち追加クーポンプレゼント)に比べて低コストでLINE友だちを増やすことが可能です。さらに、ブロック率が低いため、コスト削減にもつながります。

■「らくらくーぽんLINE通知メッセージ」料金プラン

1通あたり     : 4円 (税別)

1注文あたり配信回数: 2回

■「らくらくーぽん」概要

サービス名 : らくらくーぽん

サービス内容: 楽天市場専用のレビュー施策システム

価格    : 10,000円 (税別)

URL     : https://coupon.greenwich.co.jp/

■初期費用無料・無料トライアル特別キャンペーン実施

2025年4月1日~4月30日まで限定。

・通知メッセージ <通常100,000円 (税込)の初期費用が無料>

・らくらくーぽん <通常トライアル45日間のところ60日間無料>

LINE通知メッセージ機能審査依頼フォームhttps://coupon.greenwich.co.jp/notification-msg
※通知メッセージの利用は審査が必要となります。

【会社概要】

グリニッジ株式会社

代表者     : 代表取締役 田中 裕之
所在地     : 〒105-0004 東京都港区新橋一丁目16-4 りそな新橋ビル8F
設立      : 平成15年5月26日
事業内容    : EC・WEBソリューション (コンサルティング・制作・システム開発・運用)
ホームページURL: https://www.greenwich.co.jp

■本件に関するお問い合わせ先

グリニッジ株式会社

担当:インサイドセールス 塚部一貴 (つかべ かずき)
MAIL:inside-sales@greenwich.co.jp
TEL:03-5510-7260
FAX:03-5510-7296

好印象な伝え方

ビジネスにおいてもプライベートにおいても、人間関係は切っても切り離せないものですよね。
伝えたいことはあるけれど、嫌な感じで伝わったら嫌だな、もっと言葉選びが上手になりたいと思い、読んだ本についてご紹介させていただければと思います。

お願いするときは「否定形」ではなく「肯定形」で

✕よけいなひと言:「それはしないでください」
◎好かれるひと言:「それはこうしてください」

何気なくオフィスのドアを閉めたときに、「あ、ドアを閉めないでください」と指示されるのと、「ドアを開けておいていただけますか」とお願いされるのとでは、どちらが気分的によいでしょうか。
どちらも「ドアを開けた状態にしておいてほしい」との要望なのですが、前者が「○○しないでという否定形であるのに対し、後者は「○○して」という肯定形による言い方で、印象は大きく変わります。
これは日常のさまざまな場面にも通じることですが、人は「否定形で指示される」よりも「肯定形で依頼される」ほうが、受け止めやすくなります。
「よけいなひと言を好かれるセリフに変える言いかえ図鑑」より

お願いするときだけでなく、指示するときにも同様のことが言えると思います。
でもつい「それは△△ではなくて○○してほしかった」と思った際、
「〇〇をしてほしい」という感情より、「△△しないでほしい」という感情の方が大きくなりがちなので、自分自身を振り返ってみるともしかしたら否定形で指示してしまっていたかもしれないと思いました。否定形が浮かんできてもグッとこらえて頭の中で「○○をしてほしい」と肯定形で伝えられるよう意識していきたいです。

「あなたは知らないはず」と見下している態度が見え見え

✕よけいなひと言:「ご存じないと思いますが」
◎好かれるひと言:「ご存じかもしれませんが」

ちょっとした内緒話の時などに「ご存じないと思いますが、こんな話があるんですよ」「知らないと思いますが、あの件はこういうことなんですよ」と、よけいなひと言をつけて話し始めたことがある人もいるかもしれません。言った本人に悪気がなくても、「まだ知られてない話を教えてあげる」という特別感を伝えたい、というニュアンスで使うこともあるかもしれません。しかし、これは「これから話すことはあなたは知らないこと。でも私は情報通だから知っている」という態度が見え見えで、相手を上から目線で見下している、失礼な言葉なのです。ですから、仮に相手が100パーセント知らない話でも「知らないですよね?」と強調するのではなく、「ご存じかもしれませんが」と相手を立てて言うほうがいいのです。
「よけいなひと言を好かれるセリフに変える言いかえ図鑑」より

「あなたは知らないと思うけど」という相手のことを見下した前提の心の内が透けて見えるとたしかにムッとするかもしれないと感じました。反対に、「あなたならもう知ってるかもしれないけど」と立てられた言い方であれば、素直に「知らないから教えてほしい」と言いやすいので、その後の会話やコミュニケーションがスムーズに進むと思いました。

謙遜しすぎないほうが好感度大!自虐や卑下は逆効果

✕よけいなひと言:「そんなことないですよ」
◎好かれるひと言:「ありがとうございます」

日本には謙遜を美徳とする文化があるため、人からほめられてもすぐに、「そんなことないですよ」「全然ですよ」と謙遜する人が少なくありません。しかし、謙遜も度を越えると、せっかくほめてくれた相手の気分を害してイラッとさせたり、気を遣わせてしまうことがあります。
たとえば、「大変な仕事をよく頑張ったね」とほめた部下から、「ありがとうございます。先輩のおかげです」と言われるのと、「まだまだ全然ダメですよ」と言われるのとでは、印象がまったく異なりますよね。後者のように謙遜するのは相手の好意を否定する行為ですし、自虐的に自分を貶めるのは、もっと自分を認めてほしい気持ちの表れでもあるからです。
「よけいなひと言を好かれるセリフに変える言いかえ図鑑」より

せっかく褒めたのに謙遜されすぎると気まずい雰囲気になってしまったり、ネガティブな雰囲気になってしまう時ってありますよね。きっと褒めた方は良い雰囲気になるかと思って言ったのに、予想外にネガティブな雰囲気になってしまったら、褒めてくれた方に申し訳ないですよね。謙遜もほどほどにして、素直に「ありがとうございます」と伝えた方が、褒めてくれた方も褒められた方も良い気持ちになれそうだと思いました。

まとめ

全てに共通して言えるのは、ネガティブ発言は相手にもネガティブな感情を与えてしまい、ポジティブ発言は相手のこともポジティブにさせるので、好印象になるのだと思いました。
やはり、話していてポジティブな気持ちにさせてくれる人と話しているとこちらも明るい気持ちになるので、ポジティブな言い方で伝えることをもっと意識していきたいと思いました。

入社のご挨拶

はじめまして。
この度、開発職として中途採用で入社しました橋本と申します。

前職では、監査法人で監査業務に従事しており、今回は未経験ではありますがこの業界にチャレンジすることにしました。

「アレやっておけばよかったなぁ」という後悔をしないように生きたいと思っているので、今回も思い切って転職しました!
毎日分からないことに遭遇し、勉強しなければいけないことが山積みですが、とても充実しています。

ご縁があってグリニッジに入社することになったのですが、先輩方は面白く優しい方ばかりで、また自分の強運を発揮したなと思っています。

趣味は社会人になってから始めたゴルフで、現在住んでいる場所は打ちっぱなしが近いからという理由で決めているくらいゴルフにハマっています!

まだまだ分からないことだらけではありますが、自分がエンジニアとしてどれだけ成長できるかとてもワクワクしています!
グリニッジに貢献していけるよう日々精進して参りますので、どうぞよろしくお願いいたします。

AIを搭載した次世代エディタ Cursor

こんにちは、窪田です。

最近話題になっているコードエディタ「Cursor」をご存じでしょうか。

CursorはAIを搭載している革新的なエディタで、開発作業の効率が飛躍的に向上すると評判です。

どれくらい便利なのか気になったので、プライベートで少し使ってみたところ、確かに非常に便利だと感じました。

今回は次世代エディタのCursorの使い方を簡単に紹介したいと思います。

Cursorのインストール方法

公式サイト:https://www.cursor.com/

まずは上記の公式サイトからインストーラーをダウンロードします。

インストーラーを起動し、次へを選択していくと以下の画面が表示されます。

Keyboard欄ではキーバインドを設定します。Default(VS Code)を選択していますが、他にはVim、Jetbrains、Emacs、Sublime、Atomなど一般的なエディタが選択できます。

Language for AI欄はエディタに搭載されているAI機能が使用する言語設定なので、日本語を選択しています。

Codebase-wide欄はコードベース全体に関する質問をするための設定です。

Enabledになっているので、コードベース全体の質問機能が利用できることを示しています。

Add to Command Line欄はコマンドラインからエディタを起動するための設定です。

ここは特に変更しなくて良いので、Continueボタンをクリックします。


次は以下の画面が表示されます。

Use Extensionsボタンをクリックすると、VS Codeの拡張機能、設定、キーバインディングをインポートできます。

続いて以下の画面が表示されます。

ここはデータ収集に関する設定です。

データを収集を許可してエディタの改善に協力するか、データを提供せず自身のプライバシーを優先するかを選択できます。

基本的にはPrivacy Modeを選べば問題ないと思います。

次の画面でログインを求められるので、会員登録を済ませてログインします。


Cursorの使い方

まずはCursorの日本語化を行いましょう。

上部メニューのView > Command Paletteをクリック > Configure Display Languageと入力し、日本語を選択してCursorを再起動します。

AIによるコードの作成・編集

Cursorの基本的な設定は完了したので、プログラムを書いてみましょう。

例えば『フシギダネ、ヒトカゲ、ゼニガメの中から一匹をランダムで選ぶ想定で、選んだケースにより「○○、きみにきめた!」と表示させるプログラムを作成したい』という要望があったとします。

作成したファイルをCursorで開いた状態で「Ctrl + K」を押すとAIによるコード生成ができます。

入力欄が表示されるので、作成したいコードの内容を入力します。

Generateボタンをクリックすると、コードが生成されるので内容に問題が無ければAcceptボタンをクリックします。

指示した内容のプログラムが作成できましたね。

作成されたコードを範囲選択して「Ctrl + K」を押すと、コードに対して編集の指示ができます。Acceptボタンをクリックすると、AIが提案してくれた編集内容がコードに反映されます。

編集後のコードを実行すると、ピカチュウの場合だけ表示が変わるようになっていますね。


AIとのチャット

Cursorを開いた状態で「Ctrl + L」を押すとAIとチャットができます。

コードの解説と実行結果は同じで異なる書き方のコードについて聞いてみました。

紹介した機能の他にも、フォルダやファイルなどを参照したうえでAIとチャットを行うことができたりと、便利な機能があるようです。詳しくはこちらの公式ドキュメントを確認してみてください。


まとめ

今回はAIが搭載されているエディタのCursorというソフトを紹介してみました。

エディタから手軽にAIを活用できるのは、やはり便利ですね。

VS Codeを参考にして開発されているようなので、見た目もVS Codeに似ていて使いやすい印象でした。

Cursorが気になった方は、ぜひ試してみてください。

Babyの睡眠環境を守れ!

突然ですが

Babyには適切な室温というものがあります。

我が家では、いたるところに温度計をおいて室温をチェック・調整しています。

冬場には睡眠時に暖房と加湿器を使います。

暖房を忘れることはないのですが、加湿器には水を足すのを忘れたりします。

毎日Babyを寝室に連れていき、その後大人は別の場所で過ごし、ちょこちょこと寝室に置いてある温度計を見に腰を上げ、温度と湿度をチェックしに行ってました。

主に、この見に行く手間を省略したいのと、湿度の対策をしたくてラズパイを使ってみました。

冬の適切な温度と湿度

ちなみに適切な温度と湿度は以下の値とされています。

・室温: 20℃ ~ 23℃

・湿度: 40% ~ 60%

用意したもの

できあがったもの

子どもがいたずらするのでダイソーの小物入れの中に本体とセンサを入れて稼働させています。

小物入れの中に熱気がこもらないように通気性を上げるため、はんだごてで穴をあけたので少しプラスチックがドロりんちょしています。固まっているので問題はないです。バリのような細かくとがった部分はやすりで削ってあげて子どもがケガをしないようにします。

これを使ってなにをしているか

  • センサを使った温度と湿度の測定
  • slackへの通知

何を通知しているか

  • 現在の温度と湿度
  • 子どもが寝る前の加湿器への水足しリマインド
  • 多分加湿器の水切れているよ
  • 換気忘れてるよ

このうち加湿器への水足しリマインドは毎日19:30に通知する設定でslackのリマインダー機能を使用しており、それ以外の3つをラズパイから通知しています。

現在の温度と湿度

15分に1回その時の温度と湿度をslackで通知しています。

多分加湿器の水切れているよ

1時間の中で継続的に合計5%湿度が下がった場合に通知しています。

換気忘れてるよ

しっかり湿度をキープするということはカビとも戦わなくてはなりません。

我が家は寝室が北側にあるので、特に気を付けないとすぐカビが生えてしまいます。

なので寝ているとき以外は極力換気するようにしています。

それを忘れないように日中の計測時には、3回連続で40%を上回る場合に通知を出し続けます。

使ってみて

わざわざ温度と湿度を見に行かなくてもよくなったので、いくらか気が楽になりました。

ただ、寝顔を見たくなるので結局何回も寝室を訪問します。

今後の展望

今後、スマートスピーカなどを利用するようなことがあればslack通知とともにそちらを操作するようにしてみたいですね!

そもそも

多分温度も湿度も表示されるベビーモニターがありそうな気がします。

我が家ではそこまで考えずに買ったベビーモニターで温度しかわからないし、温度が上がりすぎても下がりすぎてもお知らせしてくれるわけではないのと、ちょっと久しぶりにラズパイを触りたくなったので工作してみました。

以上

科学的根拠に基づく最高の勉強法

社会人になってから、昔より、覚えられなくなってきている、、気がして、効果的な学習方法を科学的な根拠に基づいて紹介する本を読んでみました。
最初にまず科学的に効果が高くない勉強法が紹介されます。教科書や本は何度も繰り返し読んだ方が良いとどこかで聞いたり、読んだりしたことがあると思いますが、、
今までの自分のやり方が・・・非効率なものが多々ありショックをうけました。。
まず非効率な勉強法が紹介されます。

非効率的な勉強法

繰り返し読むだけの学習

繰り返し読むだけの学習は長期的な記憶定着に効果が低い
単純な再読は「わかった気になる」だけで、深い情報処理が行われにくい
再読した学生と1回だけ読んだ学生の間で、ほとんどの場合に優位な差がなく、再読に大きな学習効果がないことを裏付ける結果となった。
2回目以降の読み込みでは、文章に慣れて「わかった気」になりやすく、深い情報処理が行われにくい。

ノートに単純に書き写す

教科書や参考書の内容をそのままノートに書き写す、まとめることは、学習効果が低い
アメリカの高校生を対象とした研究では、文章をそのまま書き写した生徒の成績は、ただ文章を読んだ学生と変わらなかった

マーカーを引くだけの学習

テキストにマーカーを引くだけでやった気がになってしまい効果的な学習にならない 

・・・・・完全やった気になってます。
これらの勉強法に共通する問題点は、表面的な情報処理に留まり、深い理解や長期的な記憶定着につながりにくいことです。特に、「流暢性の錯覚」と呼ばれる現象により、実際には内容を十分に理解・記憶していないにもかかわらず、理解した気になってしまうリスクがあるようです。

効果的な勉強法

アクティブ・リコール

学習内容を単に復習するのではなく、意識的に思い出すプロセスを通じて記憶を定着させる学習法です。この方法は、科学的に証明された最も効果的な記憶法の一つとして広く認識されています。
学んだ内容を積極的に「思い出す」ことを中心に構成されています。
なるべく手がかりなしに記憶から引き出そうとする作業が重要
・練習問題、過去問を解く、模試をうける
・暗記カード、フラッシュカードを使う
・紙に書きだす

反復と間隔を空けた復習

短期間に詰め込むのではなく、時間を空けて復習する「間隔効果」を利用することで記憶が定着しやすくなる。

アウトプット重視の学習

インプット(読む)から アウトプット(思い出す、教える)に重点を置き学んでいく

モチベーション維持の方法

学習内容と自分との関連性を考え、紙に書き出す
自分に関連した情報の方が記憶に残りやすく、モチベーションも維持しやすい

本を読んでみて

効率的な学習法を科学的な視点から解説しています。この本では、実際の学習理論や心理学的な研究を元に、より効果的に勉強を進めるための方法、事例が詳しく紹介されてました。

自分自身にも試す価値のあるものが多かったです。取り組んで見ようと思いました。

UIで意識したい錯視効果

はじめに

「錯視」とは、目から取り込んだ視覚情報に対して、脳が補正をかけることで、実際とは異なるものを知覚する現象をいいます。広く知られている有名なもので、以下の「ミュラーリヤー錯視」などがあります。

NTT Illusion Forum - https://illusion-forum.ilab.ntt.co.jp/muller-lyer/index.html

赤色の2本の水平線は実際は同じ長さなのに、下の方が長く見えるという錯視図形です。

こういった錯視によって、意図せずユーザーに違和感を与えてしまうことがあります。
要素を整列させて配置したはずが、どこかズレて見えてしまうことは私自身も多く、試行錯誤しながら調整を行っています。
今回は、こうした錯視による違和感について、個人的に意識していきたいものをご紹介します。

上方距離過大の錯視

数値上は同じ大きさのものを並べた時に、上のものの方が下のものよりも大きく見えるという錯視です。

分かりやすい例では、上下対称に見えるフォントの「8」は、上の丸が下よりも小さめに調整されていることがあげられます。

これは、上下に同じ余白をとる場合なども同様の錯視が起こるため、UIではボタンのテキストを枠内で中央の高さで配置するときに意識したい錯視です。
上の方が大きく見えるためにテキスト上の空白が広く見えることで、同じ間隔で余白を作っても少し下寄りにテキストが配置されているよう見えることがあります。

Slack - https://slack.com/intl/ja-jp/

Slackのサイトのボタン部分を検証してみると、下の余白20pxに対して、上の余白は19pxということで、1px単位で上の余白が調整されていました。

他にもさまざまなサイトで余白が調整されていましたが、必ずしも値的に上部を小さくすることが正しいというわけではなく、ボタン内のテキストで利用しているフォントによっても取らなければならない余白は異なるようでした。
いずれにしても、単に数値に頼るばかりでなく、視覚的にも調整を行うことが必要だと思いました。

ジャストロー錯視

同じ大きさの図形を並べたときに、弧の内側に置いた図形の方が大きく見える錯視です。

青の弧と赤の弧はまったく同じ大きさですが、内側に置かれた赤の弧のほうが、半径が大きく見えます。
これは、ポップアップなどの角丸のウィンドウ内側に角丸のボタンを配置する場合などに気をつけたい錯視です。

同じボタンで、外側のフレームを同じ角丸サイズで作成したものと、異なるサイズで作成したものの見え方を比較してみました。
同じサイズで作成した左図は、同じサイズのはずが外側の丸みより内側のボタンの方が丸みがあるように見えます。錯視によって円弧が大きく見えることにより、ボタンとフレーム間にある余白の円弧が内と外でばらばらに見える印象です。
一方、異なるサイズで作成した右図は、錯視を起こさないようにする対策で、要素とは異なるサイズを指定し、内と外でメリハリをつけるという方法です。このように内と外でなるべく近しい値を取らないようにすれば、ジャストロー錯視による違和感は軽減できそうです。

色の面積効果

これは、色の面積によって、同じ色でも違った色に見えるという錯視です。
面積が広いだけ視覚は色を感知しやすいため、図形を塗りつぶしたものと、文字などの線が細いものとが並ぶと、面積の小さい文字の方が明るく見えることがあります。

UIでは、ボタンと同色で揃えたテキストなどでよく見られる錯視です。

Apple | 公式サイト - https://www.apple.com/jp/

実際にApple 公式サイトで使われている、塗りつぶしたボタンと白抜きのボタンの色を比較してみました。
一見すると同じ色を使用しているように見えますが、塗りつぶしたボタンのカラーに対して、線がメインの色面積が小さいボタンには少し濃い色をあてていることが分かります。

Apple | 公式サイト - https://www.apple.com/jp/

逆に黒背景上に置かれると、塗りつぶしたボタンに対してやや明るい色があてられていました。
これは、色面積が小さいボタンの視認性と黒背景とのコントラストも考慮して、明るめに調整されたと考えられます。

ホバーの色はどちらのボタンも同じ色が指定されているため、通常状態で同じ色に近い状態で見えるように、色の面積効果をふまえた錯視調整がされていることがうかがえます。

まとめ

数値や整列機能を利用して配置を行う場面は多々あるため、数値的に均等が取れている点でつい安心してしまい、実際の見え方での調整といったところは後回しになってしまいがちです。
数値上ぴったり作ったつもりでも、実際に完成されたものを利用しているユーザーは違和感をもっているかもしれません。

錯視という分野になると、微妙な明暗や1px単位の調整ができるかどうかという世界ですが、「神は細部に宿る」という言葉があるように、錯視が生み出す小さな違和感まで考慮した見え方まで考えが行き届くようになると、さらに洗練された、使い心地のよいUIをデザインできるようになるのではないかと思っています。

これは数値や機械的なものでは頼れない部分であり、最終的には自分の感覚によるところがあるので、常に意識を持つことで視覚的な違和感への調整スキルやセンスを磨いていきたいと思います!

今回取り上げたもの以外でも有名な錯視効果はたくさんあり、インターフェースを作る者として人間の認知や現象という観点の理解はさらに深めつつ、よりよいものづくりを目指していきたいです。