こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
こんにちは！株式会社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でデザイナーをしています、nanamiです🌿 Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか？ 「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。 今回は、そんなリズム感を生む工夫の１つ、背景の切り替え方に着目して分析してみました。 前後関係のあるセクションを繋ぐ「矢印型」LPでよく見る形です。例えば、 「こんなお悩みありませんか？」→「それを私たちが解決します！」 というセクションが並ぶ場合、背景に矢印があると目線が自然とその方向に流れるので、ユーザーの視線を特定の場所へ誘導したい場合に効果的です。 Entry Pocketこれだけ薄めの色の背景切り替えでも、矢印型に切り替わっていることで 自然と視線が上セクションか
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 最近、プロダクトやサービスの内容を紹介する手段として、イラストやモーショングラフィックなどを用いた動画が使用されているのをよく見かけます。 そこで今回は、サービスの内容を1~2分でまとめたサービス紹介動画を複数ピックアップし、その構造を分析してみることにしました。 はじめに本記事を書くに至った経緯私は現在、映像のデジタル合成やモーショングラフィックの制作などができるAdobeのソフト“After Effects”の学習をしています。 直近のゴールとして、モーショングラフィックを用いたサービス紹介動画を作れるようになろう！ということで、今回の記事はその学習の一環としてまとめました✍️ 動画で伝えるために大切なことAfter Effectsのスキルも重要なのですが、サービス紹介をする上でより重要なのはそのストーリー構成
こんにちは！ 株式会社Rabeeでデザイナーをしています、nanamiです🌿 デザインにおいて「伝えたい情報を意図した通りに見せる」ことは最重要ポイントであり、且つ難しいポイントではないでしょうか。 そんな「伝わるデザイン」の特徴の１つとして挙げられるのが、見ている人に見せたい情報を適切に見せるよう目線をコントロールできていること。 これはWebサイトのデザインでもバナーのデザインでも共通して言えることですが、今回は特に目線の動きが重要になる動画のデザインを見ながら、そのポイントをまとめてみました！ 悪い例 〜私の初心者作品を添えて〜他人の失敗例を見ると学びになることって多いですよね…🧐 ということで、良い例をご紹介する前に、まずはNG例を見ながら説明をしたいと思います。 今回はNG例として、私が学習の一環としてとあるサービスの紹介動画を作成した中からシーンを抜粋しています。 私が作成
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回は、日本時間の今日（2024.3.7）発表されたばかりのFigma新機能、マルチ編集機能について、その機能概要や使いどころを公式解説をもとにまとめました。 はじめに現在、Figma Community上ではこちらの公式解説が公開されています。 Figmaの公式解説は、実際に手を動かしてみる用の作業場も準備されていて作りが丁寧なので、こちらを読めば内容は理解できるのですが、この機能に関わらず、原則英語のFigmaデータしかない！ ということで、こちらの公式解説を和訳しながら噛み砕いた内容をまとめましたので、「機能の概要が知りたいけど、英語の解説を読むのに抵抗があって止まっている」という方の参考になると嬉しいです！ 機能概要｜ざっくり何ができるのかマルチ編集機能は、複数フレーム内の共通レイヤーを一気に選択し、それ
みなさま、こんにちは🐰 株式会社Rabeeでデザイナーをしているkoppiです🐝 2023年6月頃に登場したFigmaのvariables(バリアブル)、なんだか難しそうで尻込みしていましたが、挑戦してみました。 今回はColorについて、手探りながら分かったことをここにまとめます。 variablesって聞いたことあるけど、何ができるの？ Figmaでどうやって設定するの？ という疑問をお持ちの、まだvariablesに触れたことのない方向けの内容になっています。 variables(変数)ってなに？ある値(カラーコードやサイズなど)を箱に入れて、名前をつけたものです。 これを使うと、何度も同じ色やサイズを使うときに、簡単に一度に変更できるようになります。 variableのイメージvariablesで管理できる4つのタイプ今回はColorについて取り上げますが、variablesで
![[Figma]variablesの使い方-Color-｜koppi](https://cdn-ak-scissors.b.st-hatena.com/image/square/7887fa501c1209f95d6058efd1f820703510eb36/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F145053186%2Frectangle_large_type_2_8bbc091e3094ad5d252e85b08b41fd52.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「課題解決力」UPのために、日頃意識している事について書いてみました。 ビジネスパートナーとしての心構えこれまで、WEB制作やマーケティング支援を通じて、課題解決に取り組んできました。しかし、クライアントの中には、WEBサイトの作成やSNSアカウントの設立が目的化してしまうことがあります。 そのような場合、課題を整理し、本当に実現したいことを一緒に探り、具体的な提案に落とし込むことが重要です。単なるデザイナーの枠にとらわれることなく、ビジネスパートナーとして全体を俯瞰し、信頼と成果を得るために、日頃から課題解決力を鍛えることを心がけています。 今回は、課題解決力を高めるために、普段から意識している考え方をnoteにまとめました。 そ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
WEBデザイナー向け！はじめての「ChatGPT」で業務効率化をするヒント｜toto｜Rabee.inc
デザイナーが考える『読みやすい』noteの書き方｜akane
ページに抑揚をつける「背景切り替え」のデザインアイデア｜nanami
Webデザイナーが「サービス紹介動画」を構造分析してみた（8事例）｜nanami
上手なデザインは目の動きをコントロールする｜AfterEffects動画｜nanami
Figma新機能｜マルチ編集機能の概要と使いどころ｜nanami
[Figma]variablesの使い方-Color-｜koppi
Webデザイナーが実践する「課題解決力」UPのヒント！｜toto｜Rabee.inc