マガジンのカバー画像

Rabeeの人たち

15
株式会社Rabeeのメンバーによるnoteをまとめています。
運営しているクリエイター

記事一覧

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

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

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

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

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

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

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や特定のサービスサイトは構成要素が比較的パターン化されています。 「この要素・セクションのデザインどうしよう」となった時用に、要素ごとにデザインのパターンのストックを持っておきたい。 そんな皆さまに参考にしていただけると嬉しいです! はじめに今回は、集めた料金比較表のデザインをこちらのサ

「ボタンっぽい見出し」と「見出しっぽいボタン」問題

こんにちは!株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、最近気になっている「わかりづらさを感じるUI」について書こうと思います。よろしければお付き合いください✍ 前提:UIとは?UIは「ユーザーインターフェイス」の略。interfaceは「接点」や「境界面」という意味の英単語であり、UIとはコンピュータ(機械)とユーザー(人間)を繋ぐ接点です。スマホであれば指先、パソコンであればマウスなどを介して、人間は機械と意思の疎通を図ります。 UIは、何よりも「

社内勉強会|キーワード別にWebデザインの特徴を分析する

こんにちは!株式会社Rabeeでデザイナーをしています、nanamiです。 私たちのデザインチームでは、週に一回、各メンバーが交代で題材を持ち寄り、社内勉強会を実施しています。 今回は、デザインのイメージを表現するキーワード別に分類されたWebデザインを見て、デザイン上の特徴を分析しワイワイ話し合ってみる会!をやってみたので、その進め方や学んだことを共有したいと思います🌿 個人でも、チームでもできるワークなので、デザイナーの皆様の参考になると嬉しいです! 勉強会を設定

Figmaで文字組みを楽しもう!カーニングの基本設定&ショートカット活用術

こんにちは!株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、イラレユーザーだった私がFigmaを使いはじめて戸惑ったときの経験をもとに、Figmaで文字組みを楽しむためのコツについて書こうと思います✍ 文字組みに便利なショートカットに加えて、バナー作成に役立つFigmaプラグインも紹介しています。ぜひお役立てください。 はじめに私がデザインの勉強をはじめた時、最初に使っていたツールはIllustratorでした。元々はDTP系のデザインに興味があったので、

多言語対応UIを作るときのポイントを知っておこう

こんにちは!株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、多言語に対応するUIデザインをつくるときのポイントについて書きます。表層的な「UI」だけでなく、掲載コンテンツの内容やローカライズについても言及しています🌐 最後に参考記事も紹介しています!ぜひお楽しみください。 はじめに|多言語対応UIとは?今回扱う「多言語対応UI」とは、単一の言語のみでなく、いくつかの言語に対応しているUIデザインのこと。日本でよく見かけるのは「日本語」「英語」の2つに対応し

日本・海外のデザインシステム総まとめ【56事例+α】

こんにちは!株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、WEB上に公開されているデザインシステムをとにかくたくさん集めました。業種や規模、国内外の企業問わず、デザインシステム(スタイルガイドも含む)と名の付くものを、見つけられた範囲ですべて収集しています。 多数のデザインシステムの比較・検討をしたい際など、データベース的にお役立ていただけたら幸いです。 ※以下の目次、異次元の長さになっています。開く際はご注意ください…🐲 はじめに🗒掲載方法について

ミーティングが上手な人を観察して見えてきた、12個の共通点

はじめに「『デザインはセンスじゃない、知識の蓄積だ!』ってよく言うけど、ミーティングも上手な人の真似をすれば上手くなるのでは?」と思い、上手な人を観察して見えてきた共通点をリストアップしてみることにしました。 「ミーティングのやり方」なんて学校で教えてもらった覚えはないのに、仕事となると何かと発生するミーティングの機会。苦手意識を持つ方も多いのではないでしょうか? そんなみなさまに、私の周りのデキる人たちの特徴を共有したいと思います。 ミーティングが上手な人の特徴そもそも

STUDIOで、モバイルファースト特化のWEBデザインギャラリーを作ってみた

こんにちは!株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、ノーコードツールの「STUDIO」を使ってWEBデザインギャラリーサイトを作ってみたので、こだわりや過程について書こうと思います。 STUDIOのCMS機能を使うにあたり、参考になった記事も紹介しています!ぜひご覧ください。 ※タイトルで「モバイルファーストって、何?」と思った方は、以下のnoteがおすすめです!とても勉強になります✍ はじめに|作ったサイトの紹介タイトルでも少し触れていますが、

デザイナーのためのインフォグラフィック入門

こんにちは!デザイナーのnanamiです。 現在、Web制作会社のデザインチームに所属しています。 今回は、自社のコーポレートサイトの採用ページを盛り上げよう!というプロジェクトの過程で使用したインフォグラフィックに関する学びを書き留めたいと思います✍️ 「誰でも分かるように」って難しいデザイナーという仕事をしていると直面するこの問題。Webサイトでも、バナーでも「誰が見ても瞬時に分かる」ということを一つの指標としてデザインをすることが多いです。 そこで、情報を分かりや