“アプリUIあるある”な6つのNGアイコン 見積り・経費精算SaaSを例に専門家が解説
連載：徹底解剖！ SaaSのUI／UX 本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジ（東京都世田谷区）が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。 第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。 アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。 今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと
CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場
アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？ テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Values and Units Module Level 4に見たこともない新しい単位がありました！ lh それが使われている要素のline-heightプロパティの計算値に等しい rlh ルート要素（おそらく<html>要素）のline-heightプロパティの計算値に等しい これらの新しい単位が役立つシーンはどこだと思いますか？ Šime Vidasの記事によると、
無料で便利な macOS のアプリケーション｜1000ch
世の中には無料で良質な macOS のアプリケーションがたくさんある。中でも自分が便利に使わせてもらっているものを紹介していく。 Velja — Powerful browser pickerMeet であれば Chrome、Twitter であれば Firefox、Notion であれば Notion.app といったように任意の URL を任意のブラウザで開くといったコントロールを実現する macOS のアプリケーション。 Velja をデフォルトブラウザとして設定し、URL に応じて起動するアプリケーションを切り替えている。私の場合、Trello や Notion といったいくつかの macOS アプリを使っているので、かなり痒いところに手が届いている。
自作 OSS のためのロゴを作る | micnncim
著名 OSS にあって自作 OSS に無いものの一つにロゴがあります。 OSS において README の出来不出来はユーザへのリーチを高める重要な要素であり、詳細な Description や GIF によるデモはもちろん、ロゴがあればより魅力的な README になるでしょう。 また、SNS でシェアされる際もロゴがあればより良いでしょう。 はじめにソフトウェアエンジニアの多くはデザイナーではないためロゴを作るコストは低くなく、テキストだけ作るのであればまだ簡単ですが、自作アイコンを作ることはかなりの労力を要することでしょう。 僕も同様で、デザイナーではないため、結論として非デザイナーでも出来る戦略を考えることになりました。 今回は、micnncim 流の、出来るだけ低コストで低くないクオリティの OSS のためのロゴの作成方法について解説します。 慣れれば上の画像のようなロゴが 5
Yosemite風のアイコンが簡単に作れるツール作った - Qiita
はじめに 最近Electronを使った最強のTwitterアプリとかが話題ですが、みなさんアイコンのデザインとかどうしてますか？ UIはともかくとして、Dockにブチ込めるいい感じのアイコンデザインちょっと面倒くさい……。 そんな人のためにこんなツールを作ってみました。 Yosemite風アイコンジェネレーター http://ls8h.com/yosemite-icon/ API 使い方としては2通り用意しました。 まず、アイコンジェネレータのページから直接マウスやペンタブなどで普通に書いてみる方法。 もう一つは、APIです。 ここはQiitaですので、とりあえずkobitoのアプリアイコンを元にAPIを使って自動生成してみたいと思います。 まずは元となるアイコンを用意します。 大きいですね。1024*1024のサイズで作っています。 Dockにあるアイコンを参考に、マークをいい感じの大き
赤字1600億円の衝撃。リコーはいつ・どこで・何を間違えたのか？（前編）
出典：RICOH SP C261 ずいぶんと久しぶりにブログを書いている気がする。 3月は確定申告やら年度末の追い込み仕事やら忙しかった上に、森友の文書改竄問題で何かを書きたいと思ってもあまりにも私の常識を超えた事態に頭が付いていかず、なかなか筆が進まなかったのである。 そんな中、「リコーが1800億円の減損処理。創業以来最大の赤字1600億円に」というニュースが飛び込んで来た。 気づいている人はとっくに気づいているだろうが、私が前に働いていた「大手事務機器メーカー」とは株式会社リコーである。2005年4月1日に入社し、2016年4月10日をもって退社した。丸々11年間、思う存分に働き、成長させていただいた。私にとっては今でも感謝と愛着がある、大好きな会社である。 そんなリコーが経営破綻すらしかねない大ピンチに陥っている。しかしリコーの業績不振を報じるマスコミは「ペーパーレス化で事務機器の
最近のスタートアップのロゴのスタイルが似通ってきている問題について | freshtrax | デザイン会社 btrax ブログ
お気に入りのスタートアップやサービスのロゴがいつの間にか変わっている。このような事が最近増えている。 少し前までであれば、「ロゴのリデザイン ー なぜGapが失敗しAirbnbが受け入れられたのか」でも見られるように、ロゴの変更やリブランディングは一つのトピックとして、多くの人たちからの反響が得られていた。 しかし、最近ではなぜか”しれっと”変わっているケースが後を絶たない。それも新しいロゴのデザインが”ある一定の”共通パターンをなぞっていて、特にロゴタイプの部分はどのロゴもかなり似通ってきている。 スタートアップのビジョンをロゴで表現スタートアップを始めた当初には一体何があるであろうか？ファウンダー達の理想的な未来へのビジョン、名前、そしてロゴぐらいだろう。プロダクトもほぼ無い状態の場合、見た人の印象に残るのはその名前とロゴぐらいしか無い。そのために、自分たちのビジョンをロゴに込めて表現
Free vectors icons
No notifications to show yet You’ll see useful information here soon. Stay tuned!
【リアルタイム共同編集】Atomで出来るようになったってよ - Qiita
GithubがAtomのパッケージに Teletypeをリリースしました！ 公式サイト：Teletype for Atom また9月には、Atomを統合開発環境にするという「Atom IDE」パッケージが出ましたね！ ->Atomに統合開発環境パッケージが出たってよ 早速どんなものか説明したいと思います Teletypeってなに？ 簡単にまとめると 「離れていても複数人で同じファイルをリアルタイムに編集できる」ものです。 共同編集できるとなんなの？ 例えば上司や先輩にコードレビューをしてもらうときにわざわざ対面で行う必要がなく、 自分のエディタにJoinしてもらうことで、どこでもレビューを行えます。 また、モニターなどを見せレビューしてもらう際に「そこそこ！！！違う！２行下！！！あーそこ！」みたいなこともなく レビュー者が直接コメント行などを残せるのでレビューもしやすくなると思います。 手
欲しいものが無いからつくってみました。誰でも使えるオープンソースなネットワークアイコン集 - Qiita
概要 システム構成図などを作成しようとすると、ユーザーやサーバーの図形を使うことになりますが、ライセンスを気にせずに、タダで使えて、見た目がそれなりによくて、統一感があるものは、なかなか見つからないですよね。無いならつくるしかない、ということでつくってみました。 この図をつくっているパーツを含むPowerPointもGitHubに公開したので、ある意味オープンソースです。グループ化を解除すれば、各パーツに分解できます。 昨日から作り始めたので、まだ納得のいくものになっていませんが、これからクオリティを上げていきます。 ちなみにWindows 10のPowerPoint2013でつくっているので、LibreOfficeなどでは正常に表示されません。最初からMacかUbuntuで作図した方がもう少しマシなデザインになったと思いますが、職場はWindowsという人が多いと思うので、PowerPo
ユーザーインタフェースにおける視覚効果 - Frasco
われわれの目はとても奇妙な器官であり、ときどきわれわれ自身に嘘をつきます。ヒトの視知覚の特性を知っていれば、より親しみやすく、よりすっきりとしたデザインの作成が可能となるでしょう。視覚トリックを活用し、読みやすくてバランスのとれたフォントを制作するタイプフェイスデザイナーだけでなく、ユーザーマシンを作るインターフェースデザイナーにとっても役に立つ知識です。 １．整然としたビジュアルサイズ どちらが大きいでしょうか？：400ピクセル四方の正方形でしょうか？それとも400ピクセル四方の円でしょうか？幾何学的に言えば、どちらも幅と高さはまったく同じです。では、下図をご覧ください。われわれの目は、正方形の方が円より重い（大きい）と瞬時に捉えてしまうのです。余談ですが、ビジュアル効果を言い表す際には、重さに関係した単語の方が適切です。 この図形が正しく描かれていると信じられない方たちのために、ガイド
重要なのはリサーチ・プランニング・プロトタイプの三本柱
サイボウズのMeetup第5回のLT資料です。 Cybozu Meetup#5 デザイン&アクセシビリティ
Yosemite Icon Generator
APIも用意しました コマンド叩くだけで自動生成できますcurlで叩くだけでアイコンを自動生成できるので、ローカルにある画像を元にお手軽に作ることができます。 迷ったら簡単に作ってみましょう。きっとなんとかなる！ curl xn--9i8hku.ws/yosemite-icon/api -F "icon_image=@filename.png" -F "base_color=rgb(79, 179, 180)"> icon-name.png このスクリプトをターミナルに貼り付けて実行してみてください。 パラメーターメソッドはPOSTのみ受け付けています。APIのURLは「http://xn--9i8hku.ws/yosemite-icon/api」です。 パラメータ解説
これさえあればシステム構成図がだいたい描けるアイコンセットを公開します！ | フューチャー技術ブログ
🚧新しいVersionが公開されています🚧 こちらの記事もどうぞ確認ください。 これさえあればサービス構成図がだいたい描けるアイコンセットを公開します！ こんにちは。@chanomaruです。 みなさん、スライドを作ってますか？ 最近はビジネスパーソンだけでなく、学生さんもプレゼンテーションをする機会が多くなってきていますよね。 エンジニアがよく作るスライドの一つにシステム構成図があります。 わたしもシステムがどのような構造になっているかを説明する際によく作成しています。 システム構成図では各技術要素をアイコンで表現することが多いです。 しかし「ロードバランサー」や「キュー」など、よく使うわりにアイコンを探しにくいモチーフも多いですよね？ ・・・ということで、社内で利用されている 「これさえあればシステム構成図がだいたい描けるアイコンセット」を公開します！ アイコンセット含まれているア
システム構成図やプレゼンテーション資料などで自由に使える「さくらのアイコンセット」を公開いたしました。 | さくらのナレッジ
「さくらのアイコンセット」とは？ 「さくらのアイコンセット」は、サーバやストレージなどインフラに関連したアイコンをセットにしたものです。当社サービスをご利用をされている方はもちろん、当社サービスをご利用でない方でも、ホワイトペーパー、システム構成図、プレゼンテーション資料など様々な用途にご利用いただけます。 >>こちらからダウンロードできます。 《ライセンス》 SAKURA internet Inc. クリエイティブ・コモンズの 表示 4.0 国際 ライセンスで提供されています。 《アイコンの紹介》 「さくらのアイコンセット」を含まれるアイコンについては、下記のアイコンとなります。 1 ： general 様々な用途でご利用できる汎用的なアイコン集です。 2 ： programming PHPやPythonなどのプログラミング言語のアイコン集です。 3 ： server-parts CPU
寿司のスポンサーになりました - Dolpenの日記
何言ってんのお前 Unicode コンソーシアムには里親( Adoptation )制度があり、スポンサーになると文字を一つ選択することで里親になることができる。選択した文字は Unicode コンソーシアムのサイト上 に自分の名前とセットで掲載してもらえるのだ。そこで僕は🍣を選び、1年間の期限付きではあるが🍣の里親、ブロンズスポンサーとなったのである。 どうして "はじめに言葉ありき"というように、人間はそれを指し示す言葉がなければそれを認識できない。ただそれを認識したときに人がどうそれを受け入れるかというのはかなり怪しいもので、Unicode という統一を目指す文字コード体系は最終的に言語以上に文化の壁に当たるのではないかと思っている。実際、人アイコンの肌色で揉めたりとかは事実それなりに起きているし、今「犬を食べる」という絵文字や「鯨を捕まえて食べる」みたいな絵文字が入るとしたら、
プロのイラストレーター「湊川あい」さんに個人アイコン制作を依頼してみたら評判がよかった - Tbpgr Blog
2015年の年末か2016年の年始あたりに著書「マンガでわかるWebデザイン」が発売される予定の プロのイラストレーター「湊川あい」さんに個人アイコン制作を依頼してみた結果をまとめます。 湊川さんの仕事っぷりは他のイラストレーターさんとはおそらくかなり異なるので、 誰に頼んでも似たような成果物を得られるわけではないと思います。 その点も含めてお知らせできればいいな、と思います。 経緯 私は基本的には企業でシステム開発および付随する業務を行うソフトウェア開発者です。 しかし、2013年末あたりから状況が一変してきました。 2013年12月末からCodeIQの出題者をすることになったのです。 以降、主力(色物)出題者の一人として現在も継続して出題を行っています。 所属組織においても1開発者というよりももうちょっと上の部分を担当する比率が増えてきました。 上長と組んで開発者の採用を担当したり、組
Webアイコンクッキー会をしました - インターネットちゃんブログ
「Webアイコンクッキー会」 とは？ いまギークな女子のあいだで、ひそかに噂の「Webアイコンクッキー会」とは Webサービスのロゴやアプリのアイコンなど「インターネット」をモチーフにして みんなでいっしょにギークなクッキーを手づくりしよう、という会のこと。 おいしくてかわいい、食べられるインターネットをたのしんでいく企画です。 インターネット上でも 「かわいい！」 「これはすごい！」 「いつか私もつくってみたい！」 という声があふれたWebアイコンだらけのクッキー会、写真たっぷりでお届けします！ --> こんなところでやりました 会場は「農」と「食」をテーマにした コワーキングスペース「銀座ファーマーズラボ」http://www.farmers.jp/ 木のぬくもりと緑あふれるやさしいデザインで、ほっとくつろげる空間。 こんなかんじのところでした。 はじまりました インターネットが大好き
エンジニアでもできる洒落たロゴを短時間で作成するコツ4つ
EasyRamble は、技術ネタや子育て、英語学習、アウトドアなどについて綴るブログです。Ruby on Rails や Swift などで、Webサービス/アプリを作っています。 少し前に ポップアップ辞書の Chrome 拡張機能 をリリースした際に、半日時間をとってロゴ作成の練習を行いまして、ちょっと綺麗なロゴを作れるようになったので、その時に掴めたロゴの作り方のコツを4つまとめておきます。 【追記 2015/05/05】 本職のデザイナーの166さんに、詳細なデザインのアドバイスのコメントを頂きました。エンジニア・プログラマーの方がロゴ作成・デザインに挑戦される際には、とても参考になると思います。ぜひコメント欄までご覧ください。 【追記ここまで】 自分の場合、WEB制作・開発の中でもデザインが一番苦手でして、ロゴ制作もそれほど得意ではありません。エンジニア・プログラマーの方だと、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
