MAKOTO|Designer

デザイナー(2013-2019:WEB制作会社 -> 2020〜:株式会社jus…

MAKOTO|Designer

デザイナー(2013-2019:WEB制作会社 -> 2020〜:株式会社justInCaseTechnologies)。主にコーポレートサイトやキャンペーンサイト、アプリデザイン、SaaSデザインを担当。日々の制作で気づいた事や勉強した事をまとめていきます。

マガジン

  • UI観察マガジン

    さまざまなサービスのUI観察をしてます。あなたがこれから作りたい or 作るサービスのUI設計にきっと役立つはず。

  • プライベート

    プライベートな投稿。日記など。ためになる話は無いので、ご了承ください。

  • 感動したサービス体験

    実際に使ってみて感じた、素晴らしいサービス体験をまとめています。

  • ロゴに関する記事

最近の記事

UI観察:クイックアクションメニューのUIについて

UI観察の第17弾は「クイックアクションメニュー」について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら →) iPhone端末のホーム画面でアプリを長押ししたときに表示されるメニューは、「クイックアクションメニュー」と呼ばれます。特定のアプリやシステム機能への素早いアクセスを提供し、操作を効率化します。 2015年9月に発売されたiPhone 6s / iPhone 6s Plusから導入された機能です。 もしスマートフォンアプリのサービスを開発して

    • マニアックなFigmaの隠れた機能20選。玄人のための便利技。

      Figmaが大好きな自分としては、もっと多くの人に使ってほしいと思い、便利な機能・仕様を20点ご紹介します。 この記事では上級者も知らない、普段あまり紹介されていないFigmaの機能や仕様をお伝えします。これらを覚えることで、Figmaをさらに有効に活用し、自分のデザインやチームの制作・開発に役立てることができますので、ぜひ試してみてください。 1. レイヤー名にスラッシュを使うとフォルダ分けされて書き出せるレイヤー名にスラッシュ(/)を使用すると、画像を書き出す際に自動

      • UI観察:管理画面のステータスの色使い

        UI観察の第16弾は「管理画面のステータスの色使い」について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら ↓) 管理画面におけるステータスとは管理画面におけるステータスとは、顧客やタスク、案件などのデータが今どんな状態にあるかを示すものです。 ステータスにより、業務の進捗や対応状況を一目で確認でき、次に何をすべきか判断しやすくなります。例えば、顧客管理では「新規」「フォロー中」「契約済み」などのステータスがあり、対応の進行に応じてステータスが変化してい

        • 実体験)人の心を掴むのはツールではなく、相手を受け止めること。

          私がとある中規模のウェブサイト制作案件に参加したときの話です。 まずキックオフとして、営業と私の2人でオフラインMTGに参加し、ウェブサイトの構成や制作方針をクライアントに説明しに行きました。 私がウェブサイトに対する考え方、なぜこの構成なのかの理由など、資料を用い説明を30分程度した後、質問タイムを設けました。ウェブ知識が少ない先方のAさんが「素人なんですが…」と前置きしながら、サイトに使用するイラストのテイストについて質問してくれました。 Aさんの質問は若干ふわっとした

        UI観察:クイックアクションメニューのUIについて

        マガジン

        • UI観察マガジン
          17本
        • プライベート
          1本
          ¥980
        • 感動したサービス体験
          2本
        • ロゴに関する記事
          3本

        記事

          角丸の余白法則は、なぜ綺麗に見えるのか?

          角丸の中に別の角丸を配置する場合、余白の大きさに合わせて外側の角丸の数値を設定すると、綺麗に配置できる法則が以前話題になっていました。 読みやすいように、日本語での表記も記載します。 このポストを拝見した際、参考になると感心しました。その後、多くの方が同様にこの計算式を紹介するようになりました。 しかし私は「なぜこの計算式を用いると綺麗な角丸を作れるのか?」を言語化できず、モヤモヤしていました。 今回はそのモヤモヤを解消するために、実際にいくつかのパターンをデザインを

          角丸の余白法則は、なぜ綺麗に見えるのか?

          UI観察:コピーと複製の違いを理解する

          UI観察の第15弾は「コピーと複製」について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら ↓) WEBサービスにおいて、「コピー」と「複製」は似ている概念ですが、実際には微妙な違いがあります。 コピーは情報を一時的に保存し、別の場所に移動・挿入するために使用されます。複製は選択したアイテムの完全なコピーを作成し、同じ環境内に新たなインスタンスとして追加するために使用されます。これらの違いを理解することは、WebサービスのUIをより効果的に操作する上で重

          UI観察:コピーと複製の違いを理解する

          コーディングをイラレデータで要求するな。Figmaでやれ。

          令和にも関わらず、一部のWEB制作会社では、まるで時代錯誤のような手法が使われています。それがコーディングをAdobe Illustrator(以下イラレ)データで要求する手法です。時代に合わせた制作・開発を行っている会社からすると驚くかもしれません。冒頭強めに書いてしまいますが、現代では今すぐにでもやめたほうがいいです。本当に今すぐに(強めな言い方になって申し訳ないですが、気づいてほしいのです)。 主な問題点は、このような手法がチームの生産性・モチベーションに影響を与える

          コーディングをイラレデータで要求するな。Figmaでやれ。

          UI観察:履歴アイコンのベストプラクティス & デザインの細かな差異。

          UI観察の第14弾は「履歴アイコン」について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら ↓) 履歴アイコンは「過去に制作したデータの閲覧」「過去データに戻す機能」などに添えることがあります。 さまざまな種類があるので、今後履歴アイコンの使用時に迷わないためにも、ぜひ抑えてみてください。 まず履歴機能を認識しようアイコンの前に、履歴機能を認識しましょう。 大枠に分けると、 履歴の閲覧 過去に戻す の2つがありますが、このどちらだとしても関わらず

          UI観察:履歴アイコンのベストプラクティス & デザインの細かな差異。

          UI観察:ドロップダウンボタンとスプリットボタンの最適活用術

          UI観察の第13弾は「ドロップダウンボタン」について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら ↓) ドロップダウンボタンとは、リンクのリストの表示/非表示を切り替えることができるボタンを指します。様々なタイプがあり、用途によって使い分けられます。 基本的なドロップダウンボタンの構造Bootstrapの公式にあるボタンが説明としてわかりやすいです。 ドロップダウンボタンはクリックすると、メニューが現れて複数の選択肢が出てきます。通常のボタンはボタン

          UI観察:ドロップダウンボタンとスプリットボタンの最適活用術

          UI観察 - アコーディオンの目立たせ方、最適解は?

          UI観察の第12弾は「アコーディオン」について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら ↓) アコーディオン(accordion)とはアコーディオンは、ウェブサイトのナビゲーションメニューの1つで、コンテンツを押し下げて広げるUIです。 アコーディオンは、クリックやタップすると内容が展開し、再度クリックすると折りたたむことができます。楽器のアコーディオンの動きに似ていることから、この名前が付けられました。 アコーディオンは、次の特徴があります。

          UI観察 - アコーディオンの目立たせ方、最適解は?

          「ユーザー一覧」の"ーー”の読みづらさ。可読性向上へのアプローチ。

          私は長らく「ユーザー一覧」という表現に違和感を抱いていました。 音読すると「ゆーざーいちらん」となり、問題なく伝わります。しかし、文字で表現すると「ユーザー一覧」というフレーズが生まれ、ユーザ(ー)(一)覧と伸ばし棒が2連続で続いているように見えます。 この微妙な読みづらさは、地味に気になる点であり、「ユーザー一覧」を音読する際には、注意を払わないと自然に読むのが難しいと感じます。 それにもかかわらず、この不自然な表現である「ユーザー一覧」を使用しているサービスは数多く

          「ユーザー一覧」の"ーー”の読みづらさ。可読性向上へのアプローチ。

          Figma AutoLayoutでSTUDIOとのコラボレーションを最大限に活用する方法

          Figmaのプラグイン(Figma to STUIDIO)を使うことで、実装へのシームレスなステップを提供し、ウェブサイトの制作プロセスを劇的に簡略化が出来ます。 しかしAutoLayout機能を正しく設定しないと、Figma to STUIDIO は機能してくれません。この記事では、FigmaのAutoLayout機能を正しく駆使して、STUDIOのノーコードツールを最適化し、ウェブサイト制作を効率的に行う方法について説明していきます。 FigmaでのAutoLayou

          Figma AutoLayoutでSTUDIOとのコラボレーションを最大限に活用する方法

          UI観察 - LINE・メルカリ等から学ぶ、適切なタブの使い方

          UI観察の第11弾は「タブ」について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら ↓) タブ(tab)とは タブの一般的なデザインパターン■ テキストのみ 選択されたタブに下線が引かれている。 ■ テキストのみ(横スクロール可能) 左右に矢印が存在し、矢印をクリックで、横スクロールが可能。文字が隠れているタブをクリックした場合、隠れている領域が微弱に横移動され文字が見えるようになる。 矢印があるVer. 矢印がないVer. ■ 横幅 MU

          UI観察 - LINE・メルカリ等から学ぶ、適切なタブの使い方

          UI観察 - 三点リーダー(縦と横)の使い分けは出来てますか?

          UI観察の第10弾は「三点リーダー」について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら ↓) 三点リーダーとはUIで使用される場合でも「続きを省略」として使用されます。引用の通りに正しく英語で読むと「三点エリプシス」と呼ぶそうですが、読みづらいですね(「三点リーダー」で定着してよかったです)。 三点リーダーは縦と横どちらが正しいかnoteの三点リーダー 記事タイトルの横にある箇所の三点リーダーは横でした。hoverすると、真上にツールチップで「その

          UI観察 - 三点リーダー(縦と横)の使い分けは出来てますか?

          UI観察 - パンくずリスト(breadcrumbs)

          今回のUI観察は、パンくずリスト(breadcrumbs)について深掘りしていきます。 (その他のUI観察記事はマガジンはこちら ↓) パンくずリスト(breadcrumbs)とはフロントエンドの開発に携わっている方にはお馴染みかと思いますが、パンくずリストは、ユーザーが現在どのページにいるのかを示す道しるべとしての役割を果たすリストです。 よく使われるUIテンプレートにおけるパンくずリストのデザインを詳しく見てみましょう。 MUIのパンくずリスト参照先 Boots

          UI観察 - パンくずリスト(breadcrumbs)

          UI観察 - ピクチャー・イン・ピクチャー(PiP)

          ピクチャー・イン・ピクチャー(PiP)という機能をご存知でしょうか? これは、YouTubeやAbemaなどの動画アプリを画面の端に小さく表示しながら、他のアプリを操作することができる機能です。 (その他のUI観察記事はマガジンはこちら ↓) ピクチャーインピクチャーとはPiPはiOS14では動画に限定して使用できますが、iOS15からは動画以外のコンテンツにも対応しています。Androidではバージョン8.0(API レベル 26)以降で使用。PCでは、2018年10月

          UI観察 - ピクチャー・イン・ピクチャー(PiP)