Tips｜nanae

Figmaの生産性を高めるTips50選

こんにちは、株式会社アトラエでデザイナーをしています、三上蒼太(@sota_mikami)です。この記事は、Atrae Advent Calendar 2020 の12日目の記事です。弊社ではデザインツールとしてFigmaを使っています。僕はこのFigmaが大好きで、社内でもFigma愛は随一だと自負しています。本記事では、Figmaを愛している僕が、Figmaをもっと快適に使いこなし生産性を高めるためのTipsを吐き出します。なお、こちらの記事ではTips

Apple Musicのマイクロインタラクションを考察してみた

つみきでデザイナーとして活躍してるYukikoです！前回、Sound Cloud & Spotify のUI/UX考察記事を書いたところ、スキ♡をたくさん頂けたので、身近でポピュラーな分野で人気なアプリに関しては皆さんの興味関心も高いのかな~と思いウキウキしておりました。今回は、続☆Music App編で超王道、Monthly課金( 980円 )もみじんも惜しくないApple Musicのマイクロインタラクションの考察をしたいと思います。通勤電車の中、多くの若者

FigmaではじめるUI（Web）デザイン｜Part1

Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思

モーダル表示の分類

昨今のiOSアプリにおいて、Appleの純正アプリを筆頭に、様々なモーダル表示を見かけるようになりました。いくつか例をあげて、それぞれのモーダルにおける意味をさぐっていきたいと思います。はじめにモーダルとはモーダルの分類・Semi Modal ・Redirectable Modal ・Phased Modal まとめはじめにこんにちは、delyでiOSエンジニアをしている佐藤慧(@johnny__kei)です。社内ではJohnというニックネームで通っています。

【チームライブラリ活用編】デザインシステムを #Figma でもっと強くする

【まずやること編】デザインデータをSketchからFigmaにお引越ししようもあわせてドウゾ・・・ノゾエ（@conoito）です。今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。約半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。今日は、Figmaに移行してから行なった、コンポーネントの整備からスタイルの最適化、さらには、最適化したデザインシステムをアプリに適用するまでを、もりっとお話

UIデザイン力を鍛えるリデザインの勧めとコツ

Twitterでクラシルのリデザインの題材として使って良いとつぶやいたら数名からリデザイン案をもらえました。ありがとうございます！リデザインは、デザインの基礎スキルを身につけられると思うので、どんどんやったら良い派ですが、リデザインする際は何かにフォーカスすると振り返りしやすく技術を積み上げやすいです。今回は、僕もクラシルのリデザイン案を作りつつそのコツを書いてみたので参考になればと思います。デザイン力を鍛えるリデザインのコツインターン採用でリデザイン課題を出す

決定ボタンは右が常識？左に置く事はないの？

ひと昔前はプライマリーボタンは右と左どちらに配置するのが良いのか？なんて議論がネット上ではよく起きていましたが、最近ではすっかり右に落ち着いています。ちなみにUIデザインをまだ始めて浅い人の為に説明しておくと、その画面で最も重要度が高く、ユーザーが押す可能性の高いボタンをプライマリーボタン、キャンセルのように2番目に重要なボタンをセカンダリーボタンと呼びます。この2つのボタンは通常同じサイト、システム、アプリ内では一貫性を損なわないように同じ配置をしています。

Lottieを使ったアニメーションの実装 − デザイナーが気をつけた4つのポイント

こんにちは。プロダクトデザイナーの大窪です。お店の経営アシスタント「Airメイト」で、アプリへのアニメーション実装にアニメーションライブラリの「Lottie」を使用しました。デザイナーにとってもエンジニアにとってもアニメーション実装がぐっと身近になる「Lottie」を使用したアニメーション制作の流れを、デザイナー目線で気をつけた点を交えご紹介します。これから使ってみようかな…というデザイナーのみなさんの“Lottieはじめの一歩”になれば幸いです。 Lottieの何がよ

Adobe Fontsのオススメ「欧文書体」13選

こんにちは。グラフィックデザイナーの安村シンです。前回、『"Adobe Fonts"のオススメ「日本語書体」10選』という記事に大きく反響をいただきました。今回は後編の「欧文書体」のオススメ書体を紹介します。 Adobe CCのソフトを使っている方は、「Adobe Fonts」という、膨大な書体ライブラリーからフォントを自由に手に入れることができる現代ですが、 AdobeFontsを調べてみると、なんと1600近く欧文書体がありました。欧文フォントは、「歴史」や「

ユーザーインタフェース設計で意識したいデザインの考え方

こんにちは！はのめぐみです。キッチハイクというサービスでプロダクトデザイナをしています。 2月にデザイン戦略部メンバーで社内勉強会を行い、アプリケーションのデザイン原則についてレクチャーをしました。この note ではその内容を紹介していきます🙌 勉強会のゴールは「足並みを揃える」ことキッチハイクのデザイン戦略部は、コアスキルや得意分野が違うメンバーが集まっています。バランスがとれたメンバー構成である一方、UI や Figma の知識、ルール感覚はチーム内でバラバラです。

料理とOOUI

みなさん、料理するときにレシピを見てますか？おそらく多くの人が見ているのではないでしょうか。では、スマホやPCを使うときに説明書を見ますか？おそらく多くの人は見ないですよね。なぜスマホやPCは説明書なしで使えるのに、料理はレシピが必要なのでしょうか。本稿ではOOUIをはじめとするデザインの考え方を用いながら、その疑問を深堀りしてみます。使いやすいソフトウェアはOOUIでできているOOUIとはObject Oriented User Interfaceの略で、オブ

Figmaでイラストモジュール作ってみた！〜デザイナーインターンの業務日誌〜

お久しぶりです！また前回の記事から半年が経ってしまいました…。（もう恒例になりつつある言葉）そしてまたフォロワーが増えてました、ありがとうございます…！そして今回の記事についてなんですが、インターン先で任せていただいた業務についてのnoteを書きます！なんですが、そういえばインターン先についての記事を書いていなかったことに気づいてしまった…。ので少し紹介します。インターン先はロコガイド！現在、株式会社ロコガイドにインターン生として採用していただき、UIデザイン業務な

「要件定義」のまえに、「要求定義」

多くのアクセスがあったので無料化しました要求定義テンプレも記事内でDLできます。はじめにはじめましてUX プランナーのShoty(@shoty_k2)です。今回は「要求定義」をつかった、UX デザインについてご紹介します。実践用テンプレートも記事内にて配布しておりますので、参考にしてください。「要求定義」とは要求定義とは、「事業や施策によって実現したいこと」です。ユーザーにどのような状態になって欲しいのか・何をしてほしいのか、ビジネスで何が必要なのかなどを取り決

インハウスデザイナーがはじめてロゴデザインをした過程をまとめてみた

みなさんこんにちは。きなこです😊 普段はカクテルメイクという会社でRICHKAというプロダクトのUI/UX改善を行ったり、会社のデザインまわりの仕事をちょこちょことやっています。デザイナー歴としては１年半くらい経ちました。🐥 さて、今回は、弊社が主催で先日開催されたイベント「RICH CONTENTS SHIFT（参加してくださった皆様、ご登壇者の皆様、本当にありがとうございました！）」の裏話的なかたちで、ロゴとwebサイトのデザインが完成するまでの経緯や学びをまとめて

Tips

記事一覧