1KB以下でいろいろなソーシャルサービスのSVG形式アイコンを集めた「SuperTinyIcons」
「ギガが減る」ことを気にする人にとっては、たびたび読み込まれるサイトのロゴ画像は軽量であればあるほど嬉しいもの。テレンス・エデンさんはこの問題に取り組み、512ピクセル×512ピクセルでPNG形式ならファイルサイズが10KB以上になるようなロゴ画像を、SVG形式で1KB以下に抑え込みました。 GitHub - edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos https://github.com/edent/SuperTinyIcons Super Tiny Website Logos in SVG – Terence Eden's Blog https://shkspr.mobi/blog/201
デザイナーと働くなら知っておきたい4タイプのデザイナー像 | ベイジの社長ブログ
世間一般ではデザイナーは一括りに語られがちですが、デザイナーも千差万別、一人一人に個性があり、異なる価値観を持っています。この多種多様なデザイナーを一種類にまとめて扱うことは、デザイナーとのミスマッチに繋がり、デザイナーを擁する組織のマネジメントにとって、深刻な問題を引き起こすこともあります。 自分自身は経営者兼デザイナーとして仕事をし、今まで多くのデザイナーを見てきました。その私の経験則でいえば、デザイナーは大きく4つのタイプに分類できると考えています。例えば採用面接などで新たにデザイナーと出会った際には、まずはこの4タイプを手がかりにして、その方の理解を深めていったりします。 私が考えるデザイナーの4つのタイプとは、縦軸に「挑戦的」「保守的」、横軸に「感覚的」「論理的」を置いた4象限で表現できます。以下がその図です。 ここからは、理想実現型、成果追求型、共同作業型、実務遂行型の順に、そ
デザイン作業のイライラ解消！効果的なデザインフレームワークの作り方【2017年版】
もしあなたがウェブデザインに携わっていれば、「デザイン・フレームワーク」や「UIフレームワーク」、「UIキット」、「パターンライブラリ」などの言葉を聞いたことがあるかもしれません。これらはどれも、商品やサービスに利用される設計基準やテンプレート、UIパターン、コンポーネントとそのデザイン言語全般を指します。 これまでデザイン・フレームワークを作成したことがない人は、時間のかかる作業に見えるかもしれませんが、一度作成してしまえばデザイン制作をスピードアップさせ、全体的な作業の効率化を実現できます。 まず、デザインフレームワークが解決できる問題点や、デザインフレームワークが必要な理由、そしてデザイン制作時に必要なコンポーネント素材について詳しく見ていきましょう。 デザイン・フレームワークとは？ すべてのユーザーインターフェース・デザインは、真っ白のアートボードからはじまり、デザイナーはそこに機
現場で必要なデザインツールの見つけ方
ツールは表現から連携の時代へ 制作プロセスは、設計→デザイン→実装という真っ直ぐな線になっているように思われがちですが、あちこちに『溝』があります。関わる人が増えたり、心理的・身体的距離があれば、それだけ溝を埋めるための作業が増えていきます。 決裁者の意図・ビジネスの目的を読み取って具体的な要件にするための溝 要件を伝え、画面設計に落とし込むときの溝 画面設計から適切だと考えられるビジュアル言語を作るときの溝 ビジュアルデザインから人々が見て、触れるような状態にするための溝 デザインツールはデザイナーの都合で選べば良いわけではなく、ツールによってはプロセスの溝を深いものにしてしまう場合があります。 Photoshop や Illustrator のような従来のデザインツールと、過去 5 年くらいに登場したデザインツールの大きな違いは、デザインプロセスにおいて解決したい課題が違うところです。
2017年、デザインガイドラインについて考える。｜Yuya Furusato｜note
株式会社rootのUIデザイナー 古里祐哉です（@remmyfurusato）。 rootでは、サービスの立ち上げやリニューアルに伴う、UI/UXデザインをご支援しています。 さて、今年を振り返えると「デザインガイドラインに注力した」年でした。デザインガイドラインを必要とされるクライアント様には共通点があります。 ・レイアウトパターンやパーツの使い方が定義されていないで、設計者やエンジニアが迷う。 ・結果、サービス全体の一貫性がなく使いづらい。 このような課題を抱えるクライアント様からのご依頼を多くいただきました。サービス開発の現場で、徐々にデザインガイドラインの重要性が広まってきているのではないでしょうか。 デザインガイドライン作成を通して考えたことをまとめたいと思います。 デザインガイドラインとは？ デザインガイドラインの定義は「サービスやプラットフォームのデザイン方針を示したドキュメ
デザインを「伝える」ためにすべきこと - Speaker Deck
Transcript σβΠϯΛ ʮ͑Δʯ ͨΊʹ͖͢͜ͱ ຐ๏͍ ݟश͍ ͡Ί·ͨ͠ ֯ాҁՂ � ͢Έ͔ͩ͋ 8FCσβΠφʔ �ΠϥετϨʔλʔ ����ɹϑϦʔϥϯε TQJDBHSBQI ����ɹגࣜձࣾΩςϨπϝϯόʔ ͘ ͡ ʮ͑ΔσβΠϯʯͷ ϫΠϠʔϑϨʔϜͱͷ͖͍͋ํ σβΠϯΛʮ͑Δʯ ʮ͑ΔσβΠϯʯͷϏδϡΞϧදݱ 01 02 03 ʮ͑ΔʯΛͭ͘ΔৗͷΞτϓο τ 04 ·ͱΊ 05 Θͨ͠ͷܦྺ 2002 2006 2012 2017 ݣࣾһ ࣾһͳͲ ϑϦʔϥϯε ϑϦʔϥϯε��ੜ �ੜ ग़࢈ Θͨ͠ͷࣄͷׂ߹ ੍࡞ձࣾ 9 1 ΫϥΠΞϯ τ ίʔσΟ ϯά 6 3 3.5 0.5 8FC σβΠ ϯ %51 σβΠ ϯ Π ϥε τ Θͨ͠σβΠφʔͰ͢ σβΠφʔ࣮ ʮઃܭ࢜ʯ ग़లɿ8JLJQ
Hatena Design Hour #5 - Hatena Design Group
「デザインを見て、デザインを学ぶ」 Hatena Design Hourは、Webサービスの開発に関わっている、Webサービスに興味がある、そんな、Webサービスが大好きなデザイナーのためのイベントです。 このイベントでは、はてなでWebサービスの開発に関わるデザイナーが、自身の関わるプロジェクトからホットなトピックを持ち寄り、デザインの見どころや制作の裏話を、様々な角度からご紹介します。開発の現場で繰り広げられた試行錯誤や創意工夫、成功と失敗の物語から、あなたの探している問題解決のヒントが見つかるかもしれません。 Webサービスの魅力に満ち溢れた学びの時間をお楽しみ下さい。 Information 2017年12月08日（金） 19:20 - 22:00 株式会社はてな 東京オフィス 参加費： 無料 ハッシュタグ： #hatenadesign Presentation 歴史のあるサービス
第4回 他人の著作物を安全に利用するために - MdN Design Interactive
アート・エンタテインメントの業務を多く扱う「骨董通り法律事務所For the Arts」の弁護士による、著作権とそれにまつわる法律関連の連載です。クリエイターが気になる法律問題についてわかりやすく解説しているので、ぜひ参考にしてください。 文：弁護士 永井幸輔（骨董通り法律事務所 for the Arts） ケース：クライアントからの依頼で、旅行情報誌の表紙のアートワークを制作することになった。メインビジュアルには紅葉の山の風景写真を使いたいが、手元に使える写真がなかったため、インターネットで探して利用することにした。著作権を侵害しないよう適法に写真を使うためには、どうすればよいだろうか。 今回は、著作物の「利用」の側面についてお話ししましょう。 自身で発表するかクライアント・ワークであるかを問わず、制作物に他人のアートワークを使用することも少なくないのではないでしょうか。既存の作品には、
60点以下の仕事はなくなる。深津貴之＆drikinが語る「デザイナーの新しい働き方」 - デザイン情報サイト[JDN]
東京・青山のTHE GUILD（以下、ギルド）オフィスに集まった2人のクリエイター。かたや、ユーザーエクスペリエンス（UX）の設計やコンサルティングを手がけ、ピースオブケイク社のCXO（Chief eXperience Officer）にも就任した、ギルドを主宰する深津貴之さん。一方、サンフランシスコ在住のソフトウェアエンジニアで、ガジェットを自腹で散財しつつ日々の生活を動画で発信するYouTubeチャンネル「DRIKIN VLOG」も人気のdrikin（以下、ドリキン）さん。先日ラスベガスで行われたAdobe MAXに参加した2人が、更新されるテクノロジーとクリエイティブの関係から「新しい働き方」について語る。 新しいカタチの組織「THE GUILD」 ドリキン：まず深津さんが主宰する「ギルド」からして新しい働き方だと思うんですが、そもそもギルドはどういった組織なんですか？ 深津：フリー
![60点以下の仕事はなくなる。深津貴之＆drikinが語る「デザイナーの新しい働き方」 - デザイン情報サイト[JDN]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0fd0429141942984801cc0338c52ad5d44eb7620/height=288;version=1;width=512/https%3A%2F%2Fwww.japandesign.ne.jp%2Fwp%2Fwp-content%2Fuploads%2F2017%2F11%2FGT85010-1.jpg)
dev.toと阿部寛のホームページどっちが速いですか？ - くうと徒然なるままに
dev.toと阿部寛のホームページどっちが速いですか？— あれからのぐりだけど (@_guri3) 2017年11月15日 という内容のツイートを見つけたので計測してみる。 ずっとパソコンに向かってて飽きてたので息抜きで。 dev.to というのは、 Qiita の海外版みたなやつです。一番の特徴はナビゲーションの速さ。 対抗するのは、 THE Traditional Web Site というたたずまいで有名？な 阿部寛のホームページ 計測 今回は、Google の PageSpeed Insights を利用していきます。 dev.to まずは、dev.to から 86/100 です！ 阿部 寛 のホームページ 92/100 です！ まとめ 伝統的ウェブサイトの方が早かった！
どういうデザイナーとだと仕事しやすいか - Konifar's ZATSU
デザイナーさんと昼飯を食っていたら急に「どういうデザイナーとだと仕事しやすいですか？」と聞かれ、しばらく考えて色々話したけれどいい感じに伝えられなかったのでここに書き出しておきたい。 先に言っておくと、これはデザイナーさんの良し悪しの話ではなく、あくまで自分の経験的にこういうことを意識してくれていると楽だったなーやりやすかったなーという感想でしかない。人によって仕事のスタイルが違うのは当たり前だし、やり方を強要するつもりはない。ただ、お互いにこういう振る舞いだと仕事しやすいというのを伝え合うのは大事だと思うので、あくまでこういう風に考える開発者もいるんだなぁくらいにとらえてもらうのがいいのかもしれない。 1回目に見せるラフを作るまでがとにかく速い 人に見せる時に、今の完成度やどういう粒度のフィードバックを期待してるかを先に伝えられる 何かフィードバックを受けた時に、なぜ自分がそうしたかを論
Amazon Echo上陸でデザイナーに求められる新技術「VUIデザイン」とは？ | AMP[アンプ] - ビジネスインスピレーションメディア
ついに、「Amazon Echo」が日本に上陸したーー。 “Amazon Echo”が先行して普及した英語圏では、すでに多くのアプリケーション「Alexa Skill」が開発され、生活のさまざまなシーンで広く使われている。利用可能なアプリは2017年9月時点で2万2000を超えたと報じられており、同年2月には1万だったことを考えると、半年ほどで「倍増」したことになる。 アマゾンウェブサイトで提供されているさまざまな「Alexa Skill」 日本でも、さっそく”Amazon Echo”を購入し、アプリを開発したいと考える人は多いのではないだろうか。そこで今回は、手ではなく「声」で操作するアプリの開発に欠かせない新しい技術「VUIデザイン」、そして実際にデザインするための「5つのステップ」を紹介したい。 紹介してもらうのは、オランダ拠点のエンジニア、伊東知治氏。すでに一年以上前からAlexa
「先輩のExcelグラフ、ダサいですね」とデザイナーが言ってきたので教えを請うたら恋が始まった
『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 社内・社外向け問わず、資料作りで大活躍するのが Excelのグラフ。 Excelのデフォルト機能でさくっと作ったグラフでも結構いい感じに仕上がるので、「俺の資料、結構イケてるじゃん」と思っていました。 ところがある日の残業中、私が翌日の会議用資料の最終見直しをしていた時のことです。 私の後ろを通りかかったデザイナーのP子さんがぼそっとつぶやいた一言が、グサッと胸に刺さりました。 ※P子さんはこんな感
デザイン制作を助けてくれる国内外の素材サイトまとめ - NxWorld
見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -
ユーザーインタフェースにおける視覚効果 - Frasco
われわれの目はとても奇妙な器官であり、ときどきわれわれ自身に嘘をつきます。ヒトの視知覚の特性を知っていれば、より親しみやすく、よりすっきりとしたデザインの作成が可能となるでしょう。視覚トリックを活用し、読みやすくてバランスのとれたフォントを制作するタイプフェイスデザイナーだけでなく、ユーザーマシンを作るインターフェースデザイナーにとっても役に立つ知識です。 １．整然としたビジュアルサイズ どちらが大きいでしょうか？：400ピクセル四方の正方形でしょうか？それとも400ピクセル四方の円でしょうか？幾何学的に言えば、どちらも幅と高さはまったく同じです。では、下図をご覧ください。われわれの目は、正方形の方が円より重い（大きい）と瞬時に捉えてしまうのです。余談ですが、ビジュアル効果を言い表す際には、重さに関係した単語の方が適切です。 この図形が正しく描かれていると信じられない方たちのために、ガイド
デザイナーはそろそろエモい職業に回帰してもいいんじゃないか - m31
一瞬の気の緩みから直近の3記事くらいが消えてしまって、あーあって気分になって、もうやる気出ないので、せっかくだからエモい記事でも書こうと思います。 エモいデザインをしてはいけない風潮 今でこそUXとかIAとか、分析だーデータだーと言われますが、以前は「webデザイナー」であってもせいぜいUIの領域くらいまでしか要求されませんでした。 いえ、実はデザイナーは、要求されなくてもデザインする際にはそのほかの領域まで考えていたはずなのですが、そこに共通言語の名前がついていなかっただけかもしれません。 デザイナー＝見た目を作る人（絵を描く人）という認識の中で、ほかの領域に手を出す権限が与えられず、また許容されず、そもそも蚊帳の外になっていたともいえるのではないかと思います。 ここ数年で、そういった領域にわかりやすい名前が付きました。 名前が付いたらすぐに広まるネットワークが築かれました。 それと同時
デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜 | MEDLEY Developer Portal
2017-08-03デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜ビールが美味しい季節ですね！ 最近飲みすぎて嫁に叱られて、飲み会自粛中のデザイナー・マエダです。 メドレーでは TechLunch という社内勉強会を実施しているのですが、デザインについて私も発表する機会をいただきましたので、その内容を紹介させていただきます。テーマは「DLS の導入について」です。発表資料は記事の最後をご覧ください。 DLS（デザイン言語システム）とはDLS とは DesignLanguageSystem の略で、すごい単純にいえばデザインガイドラインみたいにUI に一貫性をもたせるため、配色やレイアウト、タイポグラフィやマージンなどのルールを策定するものです。 私が主に担当しているオンライン診療アプリ「CLINICS」は、iOS、Android、W
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁
作字 a day
