akane

Rabeeのデザイナーです!日々の学びを書き留めています🕺

akane

Rabeeのデザイナーです!日々の学びを書き留めています🕺

最近の記事

デザイナーが考える『読みやすい』noteの書き方

こんにちは!株式会社Rabeeのデザイナーのakaneです🐏 今日は、私がnoteを執筆するときに意識しているポイントを書いてみます。誰でも・いつでも・すぐに再現できるよう紹介していくので、ぜひご活用ください🕺 ちなみに、普段はこんなnoteを投稿しています👇 今回のnoteでは、とくに「noteの書き方」にフォーカスしていますが、テキストコミュニケーションを考察した以下のsakinoさんのnoteにも影響を受けています。 はじめに突然ですが、以下のnoteはどちらが

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

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

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

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

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

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

        • デザイナーが考える『読みやすい』noteの書き方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          「デザインシステム」って何?新人WEBデザイナーがインターネットの海を泳いでみた

          はじめまして!株式会社Rabeeの新人デザイナーのakaneと申します。 元々はWEBメディアの編集者をやっていましたが、昨年の秋に未経験からWEBデザイナー(UIデザイナー)に転職しました。 デザイナー歴4ヶ月。日々新鮮な気持ちで働いています💪 はじめにこの記事は、かけだしデザイナーの目線で「デザインシステムって何?」の疑問に向き合った記録です。 ちょっぴり長い記事ですが、私と同じような新人デザイナーに楽しんでもらえたら嬉しいです!最後に参考記事も紹介しているので、ぜ

          「デザインシステム」って何?新人WEBデザイナーがインターネットの海を泳いでみた