はてなブックマーク

はじめにこんにちは！株式会社Rabeeのデザイナーのakaneです。 今回は、私が初めてGitHubのプルリクレビューに参加してみた話を紹介します。エンジニアもデザイナーもGitHubでレビューすることで、プロダクト開発が今まで以上にスムーズになるかもしれません。 どうぞ最後までお楽しみください🐰 デザイナーもGitHubを理解すれば、プロダクト開発がもっと早くなるのでは現在Rabeeでは、「Rabee UI」というUIコンポーネント集を開発し、活用しています。多くのUIコンポーネントを高速で開発するにあたって、プロダクト開発のフローをもっとシンプルにしたい！と思うようになりました。 GitHubは、ざっくり言えば「複数人での実装 → レビュー → 公開を円滑にするためのツール」です。Rabeeでは、エンジニア間のレビューはGitHubで行う一方で、デザイナー ⇄ エンジニアのレビューは

こんにちは！株式会社Rabeeのデザイナーのakaneです。 今回は「Obsidian」と「Cursor」という2種類のテキストエディターを使うことで、noteをサクサク書く体制を整えてみた話です。情報収集からアウトプットまでをスムーズにしたい方、ぜひ読んでいただけたら嬉しいです。 どうぞ最後までお楽しみください🐰 参考記事ObsidianとCursor（とGitHub）の活用方法については、以下の記事を参考にさせていただきました。 ・ ・ ・ 使うツール今回使うツールは、以下の2つのエディターのみ。 Obsidian（Markdownエディター） Cursor（コードエディター） これらのツールを使うことで、Web上の気になる情報を1つの場所にどんどん蓄積していって、読んで、理解し、それらを日々アウトプットする習慣をつけよう〜✊️という試みです。 【今回の目標】 ・読みたい情報や読んだ

こんにちは！株式会社Rabeeのデザイナーのakaneです。 前回に引き続き、FigmaプラグインをChatGPTにつくってもらった話を紹介します。どうぞ最後までお楽しみください🐰 今回、作り方については割愛しています。詳細な手順は、前回のnoteで見ていただけましたら幸いです💁 ・ ・ ・ AIにデザインレビューをしてほしいよ〜先輩のシニアデザイナーにレビューを依頼する前に、AIと協働してセルフチェックができたら、チームの全員が嬉しくなったりするのでは？ということで、その方法を模索してみました。 AIにデザインレビューをお願いする方法はいくつかありそう。思いつくところで挙げてみると、こんな感じでしょうか。 1. ChatGPTにチャットで画像を送る（一番シンプル） 2. GPTsを社内専用に育ててチャットで画像を送る 3. Dify等のノーコードAIツールで自作する 4. Figma

こんにちは！株式会社Rabeeのデザイナーのakaneです。 今回は、業務を進める中で自分がほしくなったFigmaプラグインを、ChatGPTと一緒に作った（正確には「ChatGPTが作った」ですが）話を紹介します。 どうぞ最後までお楽しみください🐰 前回のRabee UIの記事、たくさんお読みいただきありがとうございました！良い状態で・良いものをリリースできるよう、引き続き頑張っております。 ・ ・ ・ 今回作ったプラグインの機能今回作ったのは、Figmaの選択したフレーム内で「すべての数値にVariablesが適用されているか？」「素の数値が当たってしまっていないか？」をチェックするためのプラグインです。 【Variablesの数値適用をチェックしたいポイント】 ・padding ・gap ・border-width ・border-radius きっかけとなったのは、先日リリースを

先日、私のはたらくRabeeではプレスリリースを出しました！自分が入社してからは初のプレスリリースです。今回は、その詳細と展望について話します。 リリース予定の「Rabee UI」とは？はじめに、今回Rabeeが出したプレスリリースは以下です。 お急ぎの方に向けて、リリース内容のサマリーもざっくりご紹介します。 Rabeeは、UIコンポーネント集「Rabee UI」をリリース予定です Rabee UIとは、Svelte × Tailwind CSSのUIコンポーネント集です UIコンポーネント集であって、UIライブラリではありません🙅 カスタマイズの自由度が高くコンポーネント単位でプロダクトに取り入れられる、コンポーネントの「種」といえるものです Rabee UIの導入によって、デザインシステム構築ひいてはプロダクト開発が爆速になります LP・Figma・Discordを先行公開中です上

はじめにこんにちは！株式会社Rabeeのデザイナーのakaneです。 今回は、最近よく耳にする「shadcn/ui」について調べてみました。どうやらUIコンポーネントっぽいことは分かるけど、一体何を指すんだろう？いわゆる「UIライブラリ」との違いって何？といった疑問をデザイナー目線でお話しします。 どうぞ最後までお楽しみください🐰 「shadcn/ui」って最近よく聞きますよね「shadcn/ui」という単語、最近よく耳にしませんか？たとえば、最近話題になった10Xさんの記事。 なんだかよく分からないけど、UIコンポーネントの話をしているらしい。shadcn/uiはコンポーネントの集まりらしい。それを使うと、スピーディーなプロダクト開発ができるらしい…。 なんとなくは分かる気がするけれど、shadcn/uiって一体何なのでしょうか？UIコンポーネント集に見えるけど、既存のいわゆる「UIラ

こんにちは！株式会社Rabeeのデザイナーのakaneです。 この度、株式会社Rabeeは「Studio Experts」に加盟しました！今回は、加盟までに取り組んできた内容や過程について、Rabeeのカルチャー紹介も兼ねてお話しできたらと思います。 どうぞ最後までお楽しみください🐰 RabeeがStudio Expertsに加盟しました🎉先日、株式会社Rabeeが「Studio Experts」に加盟しました！Rabeeは、ほとんどがエンジニアとデザイナーのみで構成されている開発会社です。1年ほど前からStudioを利用しており、今月から無事に加盟となりました。 エンジニアもたくさんいる会社なのに、なぜノーコードのStudioを使うの？と感じるかもしれませんが、主に3つの理由があります。 身軽に、スピーディーに開発できる 少額のコストで走り出せる（Personalプランなら1,190

こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今日は、私がnoteを執筆するときに意識しているポイントを書いてみます。誰でも・いつでも・すぐに再現できるよう紹介していくので、ぜひご活用ください🕺 ちなみに、普段はこんなnoteを投稿しています👇 今回のnoteでは、とくに「noteの書き方」にフォーカスしていますが、テキストコミュニケーションを考察した以下のsakinoさんのnoteにも影響を受けています。 はじめに突然ですが、以下のnoteはどちらが読みやすいですか？ このように尋ねられると、多くの人が「B」を選んでくれるのではないでしょうか（という前提で話を進めます）。 では、どうしてBが「読みやすい」と感じるのか。 わたしは、文章が「デザイン」されているからだと思っています。 読みやすい文章は「デザイン」されているそもそも「デザイン」って何を指してるの？というと

こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク

こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、先輩に教えてもらった「ワイヤーフレームの作り方」を紹介します。わたしはこの方法で作るようになってから、ワイヤーフレーム作りが楽しくて、Webデザインの大好きな工程のひとつになりました。 このワクワク感を、ぜひたくさんの新人デザイナーとシェアできればと思います！どうぞ最後までお楽しみください✍ はじめに：ワイヤーフレーム（WF）とは？ワイヤーフレーム（「WF」と省略することも）は、Webサービスの制作過程で必要になる設計図のこと。例を挙げると、以前に私が個人的に制作した音楽教室のLPでは、以下のようなワイヤーフレームを作りました。 ワイヤーフレームは、Webサイトやアプリの中で「どんな情報を、どんな順番で見せるのか？」を決める骨組みです。ここで決めた内容が、後工程のデザインに大きく影響します。 ちなみに、ワイヤーフレ

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webサイトの顔とも言える「ファーストビュー」をより魅力的に見せるためのコツについて調べてみました。参考サイトもたくさん紹介しているので、ぜひ最後までお楽しみください✍ はじめに：ファーストビュー（FV）とは？Webサイトのファーストビュー（FV）とは、サイトを開いたときにスクロールせず見える範囲のこと。ユーザーにとってはいちばん最初に目に飛び込んでくる、Webサイトの第一印象を決める「顔」となる部分です。 （ちなみに「ファーストビュー」は和製英語で、英語では「Above the fold」と呼ぶそうです。） たとえば、家計簿プリカ「B/43」公式サイトのファーストビューは以下のようなデザイン。B/43のメリットを文章とカードによって端的に伝えながら、画面下部には利用シーンがわかる写真をカルーセルで掲載。一画面の中

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、多言語に対応するUIデザインをつくるときのポイントについて書きます。表層的な「UI」だけでなく、掲載コンテンツの内容やローカライズについても言及しています🌐 最後に参考記事も紹介しています！ぜひお楽しみください。 【自己紹介】 昨年の秋に未経験からUI/UXデザイナーに転職しました！主にわたしと同じ新人デザイナー向けに、シェアしたい学びやTipsを投稿しています。 はじめに｜多言語対応UIとは？今回扱う「多言語対応UI」とは、単一の言語のみでなく、いくつかの言語に対応しているUIデザインのこと。日本でよく見かけるのは「日本語」「英語」の2つに対応しているパターンです。 たとえば、LINEヤフー株式会社のコーポレートサイトは、ヘッダーに言語切り替え機能が付いていて、日本語と英語の2通りで表示できるようになっています

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、ノーコードツールの「STUDIO」を使ってWEBデザインギャラリーサイトを作ってみたので、こだわりや過程について書こうと思います。 STUDIOのCMS機能を使うにあたり、参考になった記事も紹介しています！ぜひご覧ください。 ※タイトルで「モバイルファーストって、何？」と思った方は、以下のnoteがおすすめです！とても勉強になります✍ はじめに｜作ったサイトの紹介タイトルでも少し触れていますが、今回わたしが作ったのは「モバイルファーストのサイトに特化したWEBデザインギャラリー」です。 モバイルファーストのサイトって、真ん中がつるつる動くのが非常にかわいいですよね？ あの挙動をたくさん眺めたいな〜と前々から思っていたものの、私が探した範囲では、モバイルファースト特化のギャラリーサイトは見当たらず。 それなら！という

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今日は、WEB上に公開されているデザインシステムをとにかくたくさん集めました。業種や規模、国内外の企業問わず、デザインシステム（スタイルガイドも含む）と名の付くものを、見つけられた範囲ですべて収集しています。 多数のデザインシステムの比較・検討をしたい際など、データベース的にお役立ていただけたら幸いです。 【アップデート履歴】 ・2024/02/08 一休,Wantedly,W3C,パリ五輪2024を追加しました ※以下の目次、異次元の長さになっています。開く際はご注意ください…🐲 はじめに🗒掲載方法について「企業名＋URL＋スクリーンショット」を掲載しています。スクリーンショットについては、1枚目は全体の雰囲気が掴めるもの、2枚目はテキスト入力系コンポーネントの説明ページを選んでいます。 💡Tips｜複数のURLを

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、イラレユーザーだった私がFigmaを使いはじめて戸惑ったときの経験をもとに、Figmaで文字組みを楽しむためのコツについて書こうと思います✍ 文字組みに便利なショートカットに加えて、バナー作成に役立つFigmaプラグインも紹介しています。ぜひお役立てください。 【自己紹介】 昨年の秋に未経験からUI/UXデザイナーに転職しました！主にわたしと同じ新人デザイナー向けに、シェアしたい学びやTipsを投稿しています💪 はじめに私がデザインの勉強をはじめた時、最初に使っていたツールはIllustratorでした。元々はDTP系のデザインに興味があったので、印刷物の作成スキルを学習を進めていました。 最初はエディトリアルデザイナーを目指していましたしかし、転職活動を進めるなかでWEB業界にも惹かれるように。そこで、私もFi