参考、参照 reference

reference は「言及」「紹介」「関連」といった意味を持つ言葉ですが、デザインの仕事では特に「参考」や「参照」の意味で使われることが多いです。

デザインのインスピレーションや競合プロダクトなど、参考にする資料やイメージを指して使います。チャットや会話の中でも “for reference”（参考までに）と言いながら、画像やリンクを共有することがよくあります。

If you need a reference, here’s the previous design.
もし参考となるものが必要であれば、こちらが以前のデザインになります。

Here are web design references that the design team collected.
これらがデザインチームが集めた参考サイトです。

I found a visual bug. Attaching a video for reference.
表示上のバグを見つけました。参考までに動画を添付しています。

動詞として reference が使われることもあります。もともとは名詞であり、動詞としては refer を使うのが一般的でしたが、近年では “reference” を動詞として使う例も広く見られるようになりました。現在では多くの職場や業界で定着しており、違和感なく受け取られることも少なくないようです。

📎 reference/refer to | Language Usage Weblog

Feel free to reference this style guide.
好きにこのスタイルガイドを参考にしてください。

What’s the best Figma file to reference for this work?
この作業で参照するべき Figma ファイルはどれですか？

PICKUP

今回のテーマに関連して、デザインの参考になる事例を集めたサイトの中から、私がよく利用しているものを紹介します。

📎 Page Flows - user flow design inspiration

名前の通り、さまざまなアプリのユーザーフローをまとめているサイトです。

動画として記録が残されており、ステップごとに挙動を追えるようになっています。新機能のオンボーディング事例を集める機会があった際には、とても役に立ちました。モバイルアプリだけでなく、デスクトップアプリやメールの事例も数多く掲載されています。

📎 Landing Page Design Inspiration - Lapa Ninja

ランディングページのスクリーンショットを、カテゴリや色ごとに探すことができます。ウェブデザインの参考になるのはもちろん、知らなかったプロダクトやサービスに出会うきっかけになることもあります。

📎 The Brand Identity

ブランドデザインの事例を紹介しているサイトです。ビジュアルだけでなく、そのデザインに至った背景についてのインタビューや解説も添えられており、読み物としても楽しめます。

ここでは3件のみの紹介となりましたが、参考になるウェブサイトのブックマークをさらに多く Notion にまとめているので共有しますね。

灰色ハイジのブックマークを見てみる

⚠️ この特集は、2022年12月にサポーター向けに配信した記事を再編集したものであるため、他のブックマークについて一部の情報が古くなっている可能性があります。