こんにちは！株式会社Rabeeのtotoです🐝デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「生成AI」はほぼ初めて！というWEBデザイナーの方が、業務で使える活用術をご紹介します。 まずは基本的な使い方の習得を目指しましょう！ 今回は主にChatGPTを使った業務の効率化方法をお伝えします。 私が普段利用する時はTeamプランを使用していますが、無料プランでできるものを取り上げましたので、ぜひ実際に試しながら読んでみてくださいね！ 1. 生成AIを使うリスクとは？はじめに、生成AIを使う上での注意点をお伝えします。 漠然とリスクを感じているために、生成AIを業務に活用できていないという方も多いのではないでしょうか。 主にどのようなリスクがあるのかを把握し、何に注意をすれば良いのかを知りましょう。 1. データの

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

株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「課題解決力」UPのために、日頃意識している事について書いてみました。 ビジネスパートナーとしての心構えこれまで、WEB制作やマーケティング支援を通じて、課題解決に取り組んできました。しかし、クライアントの中には、WEBサイトの作成やSNSアカウントの設立が目的化してしまうことがあります。 そのような場合、課題を整理し、本当に実現したいことを一緒に探り、具体的な提案に落とし込むことが重要です。単なるデザイナーの枠にとらわれることなく、ビジネスパートナーとして全体を俯瞰し、信頼と成果を得るために、日頃から課題解決力を鍛えることを心がけています。 今回は、課題解決力を高めるために、普段から意識している考え方をnoteにまとめました。 そ

こんにちは！ 株式会社Rabeeでデザイナーをしています、nanamiです🌿 Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか？ 「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。 今回は、そんなリズム感を生む工夫の１つ、背景の切り替え方に着目して分析してみました。 前後関係のあるセクションを繋ぐ「矢印型」LPでよく見る形です。例えば、 「こんなお悩みありませんか？」→「それを私たちが解決します！」 というセクションが並ぶ場合、背景に矢印があると目線が自然とその方向に流れるので、ユーザーの視線を特定の場所へ誘導したい場合に効果的です。 Entry Pocketこれだけ薄めの色の背景切り替えでも、矢印型に切り替わっていることで 自然と視線が上セクションか

はじめまして。 株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日はデザインフィードバックを成功に導くための６つのヒントについてお伝えします！ お時間の無い方は「チェックリスト」だけでもサクッと目を通してみてください✅ デザイナーの皆さま。 クライアントのフィードバックを受ける際、どのような準備をしていますか？ 恥ずかしながら、私がデザイナー駆け出しの頃は「フィードバックを受ける準備」を怠っていました。 その結果、大規模な修正やスケジュールの圧迫、フィードバック通りにやったのに満足度が上がらず、　最後には方向性を見失う事態に。 まさに「こんなはずじゃなかった！！」という状況でした。 このような状況は事前の準備や心構えで軽減できます。 時間に追われながら身を削って修正をしたあの日を繰り

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

株式会社RabeeでUI/UXデザインをしているmayukiです 0→1を生み出す瞬間、プロジェクトのエンジンとなれるようなばちイケデザイナーを目指しています。 突然ですが…こんなお困りごとありませんか？💭 「デザイナーとしてクライアントの要望をうかがう際に、何を聞いたらいいかわからない」 「ヒアリングしてきたものの、いざ手を動かし始めたらわからないことがポロポロ…」 「クライアントに聞きたいことがたくさん出てきてしまった…」 今回は、webサイトやアプリのデザインの制作を受注する想定で、クライアントへの初回ヒアリングをする際にデザイナーとして聞くべき最低限のことをまとめました。 ※保存版のためなかなか長い記事となっています。 この文章はこんな方におすすめです ・デザイナーになりたてのジュニアクラスの方 ・スクールに通ったり独学で勉強したのでそろそろクラウドソーシングでお仕事を受けたい方

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

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

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPにおいてCV（コンバージョン）に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。 はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を１つずつ特化して調査をしていきたいと思っています。 今回はその「パーツ別デザインまとめ」シリーズ２本目です。 ↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです！ パターン別 CTAボタン一覧サイト閲覧者に特定の行動を促すよう誘導する（Call to Action）ためには、CTAボタンに視線を集める必要があります。 そこで今回は「目に留まりやすいCTAボタンにはどんな特徴があるのか？」という観点で、見つけた特徴別にCTAボタン周りのデザインを一覧化しました。 💡差別化された背景色CTAボ

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

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回は、日本時間の今日（2024.3.7）発表されたばかりのFigma新機能、マルチ編集機能について、その機能概要や使いどころを公式解説をもとにまとめました。 はじめに現在、Figma Community上ではこちらの公式解説が公開されています。 Figmaの公式解説は、実際に手を動かしてみる用の作業場も準備されていて作りが丁寧なので、こちらを読めば内容は理解できるのですが、この機能に関わらず、原則英語のFigmaデータしかない！ ということで、こちらの公式解説を和訳しながら噛み砕いた内容をまとめましたので、「機能の概要が知りたいけど、英語の解説を読むのに抵抗があって止まっている」という方の参考になると嬉しいです！ 機能概要｜ざっくり何ができるのかマルチ編集機能は、複数フレーム内の共通レイヤーを一気に選択し、それ

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回はLPやサービスサイトでよく見かける「料金比較表」のUIパーツに特化してデザインを集めてみました。 LPや特定のサービスサイトは構成要素が比較的パターン化されています。 「この要素・セクションのデザインどうしよう」となった時用に、要素ごとにデザインのパターンのストックを持っておきたい。 そんな皆さまに参考にしていただけると嬉しいです！ はじめに今回は、集めた料金比較表のデザインをこちらのサイトを参考に、テーブル型、カード型、ブロック型の３パターンに分類してリストアップしています。 特記事項以下に掲載している料金表は、記事作成時点（2024.2.27）でデザイン学習を目的として収集したものです。現在の料金とは異なる可能性がありますのでご留意ください。 【テーブル型】行＆列の表形式 横軸に料金パターン、縦軸にその

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

株式会社Labit 東京都渋谷区桜丘町4-14 VORT 渋谷桜丘 11F, 12F 代表取締役　鶴田 浩之 Labit、世界最速10秒で出品できる本のフリマアプリ 「ブクマ！」を6月に提供開始 -世界規格のISBNコードから10秒で出品、カタログ型のフリマアプリでCtoC市場に参入- 株式会社Labit（東京都渋谷区, 代表取締役 鶴田浩之、以下「Labit」）は、10秒で出品ができる本のフリマアプリ「ブクマ！」を、iOS版を6月下旬、Android版を今夏に提供開始することになりましたので、お知らせいたします。 「ブクマ！」は、本の裏表紙に印字されている ISBNコード *1 をスマートフォンのカメラでかざすことで、予め用意されたタイトル・著者・出版社等のデータを用いて出品できるカタログ型のフリマアプリです。 売り手は、販売価格・本の状態を選ぶだけで、 最短10秒で出品できること