Rabeeの人たち

本

株式会社Rabeeのメンバーによるnoteをまとめています。

運営しているクリエイター: 株式会社Rabee

#デザイン

ページに抑揚をつける「背景切り替え」のデザインアイデア

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか？「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。今回は、そんなリズム感を生む工夫の１つ、背景の切り替え方に着目して分析してみました。前後関係のあるセクションを繋ぐ「矢印型」LPでよく見る形です。例え

デザインのペルソナ設定やトンマナの決定に役立つ！「ブランドアーキタイプ」とは？

はじめまして、株式会社Rabeeでデザイナーをしているkoppiです🐰🐝 1年目デザイナーが日々の学びをnoteに綴っていきたいと思います。雰囲気や想いなどをデザインとして具現化するのって難しいですよね。何かヒントになるようなものがあると嬉しいなと思い…。今回はペルソナやトンマナを決める際に役立ちそうなブランドアーキタイプについてお話しします。アーキタイプとは？アーキタイプとは、心理学者カール・ユングが提唱した概念です。人々の深層心理に共通して存在している、

Webアクセシビリティことはじめ【おすすめ資料5選】

こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り

これで翻弄されない！デザインフィードバックを成功に導く６つのヒント

はじめまして。株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。本日はデザインフィードバックを成功に導くための６つのヒントについてお伝えします！お時間の無い方は「チェックリスト」だけでもサクッと目を通してみてください✅ デザイナーの皆さま。クライアントのフィードバックを受ける際、どのような準備をしていますか？恥ずかしながら、私がデザイナー駆け出しの頃は「フィー

「ステップ・フロー」のUIを集めてみた｜パーツ別デザインまとめ

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。今回は、LPや提案資料などでよく使用されるデザインパーツ「ステップ・フロー」のUIを集めてみました。はじめに「ご利用の流れ」や「お申込の流れ」など、時系列に並んだ項目をわかりやすく可視化する手段として用いられるステップ・フローのセクションは、サービスやプロダクトを訴求するLPや提案資料にかかせない存在です。今回はそのステップの整列パターン別に、PC・SPでどのようにレスポンシブされるのか？と

ヘッダー（グローバルナビゲーション）のデザイン事例100選

こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはど

Webデザイナーが「サービス紹介動画」を構造分析してみた（8事例）

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。最近、プロダクトやサービスの内容を紹介する手段として、イラストやモーショングラフィックなどを用いた動画が使用されているのをよく見かけます。そこで今回は、サービスの内容を1~2分でまとめたサービス紹介動画を複数ピックアップし、その構造を分析してみることにしました。はじめに本記事を書くに至った経緯私は現在、映像のデジタル合成やモーショングラフィックの制作などができるAdobeのソフト“Aft

【2024年版】デザイナーが初回ヒアリングで聞くこと&聞き方まとめ

株式会社RabeeでUI/UXデザインをしているmayukiです 0→1を生み出す瞬間、プロジェクトのエンジンとなれるようなばちイケデザイナーを目指しています。突然ですが…こんなお困りごとありませんか？💭 今回は、webサイトやアプリのデザインの制作を受注する想定で、クライアントへの初回ヒアリングをする際にデザイナーとして聞くべき最低限のことをまとめました。 ※保存版のためなかなか長い記事となっています。この文章はこんな方におすすめです以下の構成で書いています

ワイヤーフレームは“しゃべりながら”つくる

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、先輩に教えてもらった「ワイヤーフレームの作り方」を紹介します。わたしはこの方法で作るようになってから、ワイヤーフレーム作りが楽しくて、Webデザインの大好きな工程のひとつになりました。このワクワク感を、ぜひたくさんの新人デザイナーとシェアできればと思います！どうぞ最後までお楽しみください✍ はじめに：ワイヤーフレーム（WF）とは？ワイヤーフレーム（「WF」と省略することも）は、Webサービスの制

Webデザインで「紙っぽさ」を出す方法を考えてみる

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。たとえば、以下のようなデザインは私にとって「紙っぽい」例です。どうして、私はこれらを雑誌

「CTAボタン」のUIを集めてみた｜パーツ別デザインまとめ

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。今回は、LPにおいてCV（コンバージョン）に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を１つずつ特化して調査をしていきたいと思っています。今回はその「パーツ別デザインまとめ」シリーズ２本目です。 ↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです！パタ

Webサイトのファーストビューに『動き』を取り入れるアイデア8選

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webサイトの顔とも言える「ファーストビュー」をより魅力的に見せるためのコツについて調べてみました。参考サイトもたくさん紹介しているので、ぜひ最後までお楽しみください✍ はじめに：ファーストビュー（FV）とは？Webサイトのファーストビュー（FV）とは、サイトを開いたときにスクロールせず見える範囲のこと。ユーザーにとってはいちばん最初に目に飛び込んでくる、Webサイトの第一印象を決める「顔」となる部

Figma新機能｜マルチ編集機能の概要と使いどころ

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回は、日本時間の今日（2024.3.7）発表されたばかりのFigma新機能、マルチ編集機能について、その機能概要や使いどころを公式解説をもとにまとめました。はじめに現在、Figma Community上ではこちらの公式解説が公開されています。 Figmaの公式解説は、実際に手を動かしてみる用の作業場も準備されていて作りが丁寧なので、こちらを読めば内容は理解できるのですが、この機能に関わらず、

「料金比較表」のUIを集めてみた｜パーツ別デザインまとめ

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回はLPやサービスサイトでよく見かける「料金比較表」のUIパーツに特化してデザインを集めてみました。 LPや特定のサービスサイトは構成要素が比較的パターン化されています。「この要素・セクションのデザインどうしよう」となった時用に、要素ごとにデザインのパターンのストックを持っておきたい。そんな皆さまに参考にしていただけると嬉しいです！はじめに今回は、集めた料金比較表のデザインをこちらのサ