はてなブックマーク

UI観察の第10弾は「三点リーダー」について深掘りしていきます。 （その他のUI観察記事はマガジンはこちら ↓） 三点リーダーとは三点リーダーとは、三つの点が一列に並んだ記号文字「…」のこと。似た記号文字に点が二つの二点リーダー（「‥」）があり、用法や意味などはほぼ同等とされる。 文章中に用いる記号（約物）の一つで、続きが省略されていることを表したり、表や箇条書きなどでは項目間の対応関係を表したりするのによく用いられる。会話文などの場合は、無言や無音、静寂、余韻などを表すこともある。 英語の “leader” には、項目を繋いだり視線を誘導する点線やダッシュという意味があるため、日本語では「三点リーダー」という名称が定着しているが、文章中などで省略を表す記号のことは英語では “ellipsis” （エリプシス/複数形はellipses）と呼ぶのが一般的。 三点リーダーとは - 意味をわかり

UI観察の第16弾は「管理画面のステータスの色使い」について深掘りしていきます。 （その他のUI観察記事はマガジンはこちら ↓） 管理画面におけるステータスとは管理画面におけるステータスとは、顧客やタスク、案件などのデータが今どんな状態にあるかを示すものです。 ステータスにより、業務の進捗や対応状況を一目で確認でき、次に何をすべきか判断しやすくなります。例えば、顧客管理では「新規」「フォロー中」「契約済み」などのステータスがあり、対応の進行に応じてステータスが変化していきます。 ステータスは、業務の効率化や管理のしやすさをサポートする、非常に便利なデータ項目です。 ステータスの区分けとして色が使われるステータスの違いを視覚的に認識しやすくするために「色」がよく使用されます。しかし、適切な色分けは難易度が高く、慎重な設計が必要です。 例えば、リクルートのサービス「Airレジ」では以下のように

■ はじめにロゴといっても様々な種類があります。「企業のロゴ」「サービスのロゴ」「商品のロゴ」「スポーツチームのロゴ」などなど、用途によって目的・性質が異なります。 よく本や記事では 「かんたんなロゴの作り方を教えます！」 「ロゴを作るときのプロセス大解剖！」 といったようにロゴを作る前提で語られる切り口がほとんど。自分も拝見して勉強することが多い一方、 「そもそもロゴとは何なのか？」 「ロゴを作ることでどういった効果が得られるのか？」 「そもそもロゴって何だっけ？」 というようなそもそもの疑問に答える、ロゴの性質・必要性を詳細に語っている記事が少ないなと感じてます。自分も「ロゴとは一体何なのか詳しく教えていただけますか？」と問われたら、なかなかビシッと答えるのが難しいです。。（なので自戒を込めたnoteとなっております。。） 最近では、個人でも手軽にWEBサイト・アプリ・動画が作成でき、

■ はじめにデザイン制作をしていて、こんな経験はないでしょうか？ 先方「納品ファイルはPSDファイルでお願いします。」 自分「かしこまりました！」 （Adobe XDで制作したんだけどな…） 自分はよくあります。納品形式がPSDと定められていることも多く、 「はじめからPSDで制作をしてしまうか」 「XDで制作したのちにPSDへ直していくか」 とよく悩んでいました。 ネットの記事で、XDからPSDへ変換する方法もいくつか見つけましたが、レイヤーがラスタライズされてしまったり、完璧に変換する方法は見つかりませんでした。 しかし、さまざまな記事を参考にしながら、100%はできませんが90%は変換することに成功。数十秒で出来るので、レイヤーを１つ１つ再構築していくよりも、かなり工数を削減できます。 PSDファイルへ変換する際にかなり役に立つと思いますので、やり方を紹介したいと思います。 ■ 手順

■ はじめに先日、Adobeシリーズの大型アップデートが行われました。Adobe XDも大規模なアップデートがされ、プラグイン機能が導入されました。 プラグインは自分で開発を行ってみたり、既存のプラグインを使用することが可能です。実制作に使えそうなプラグインをまとめてみましたので、５段階評価で紹介していきたいと思います。 ■ おすすめプラグイン ★★★★★（星５つ） ■ VizzyCharts 神。csvファイルから読み込んで、グラフを生成することができます。折れ線グラフ、円グラフ、棒グラフの３パターンから選べて、基本的なグラフなら簡単に作れます。 文字色、文字サイズ、グラフの横幅、縦幅の調整も可能。 折れ線グラフは、滑らかなカーブにも変更できるのは個人的に嬉しいです。 ■ Google Sheets 神。csvファイルもしくはスプレッドシートの共有URLから直接読み込んで、 選択したレイ