UIデザインの作業状況やワークフローの変化を知り、自分にあった良い方法はどんどん取り入れよう！
Webデザイナーやデベロッパーの実際に作業しているファイルを元に、UIデザインの作業状況を調査したレポートを紹介します。 UIデザインに使用しているツール、ファイル、シンボル、レイヤー、ベクターグラフィックなど、どのようなワークフローが実践されているか垣間見ることができます。 Avocode 2017 UI Design Report 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2017年、UIデザインの作業状況に関するレポート 1. Webデザイナーが使用しているツール 2. ファイルの容量 3. デザインのコンポーネント化 4. レイヤー管理 5. テキストのレイヤー 6. ベクターグラフィック レポートのダウンロード 2017年、UIデザインの作業状況に関するレポート 本レポートは、デザイナーとデベロッパーのコラボツー
デザインの誕生｜棚橋弘季 Hiroki Tanahashi
designという語が英語として登場してくるのは、16世紀後半から17世紀初頭にかけてのことだと言う。 いずれにしろOEDによると、英語としてのdesignが出てくるのは1593年が最初です。「絵」の用法では1638年が最初。要するにその界隈ですね。そしてぴったりその時期の1607年、「ディゼーニョ・インテルノ disegno interno」という言葉が、マニエリストのフェデリコ・ツッカーリ（1542-1609）の「絵画、彫刻、建築のイデア」というエッセーの中に登場しました。今まで長い間、ヨーロッパのデザインは基本的に外界にあるものをたくみに写す技術、ミメーシスの技法でやってきた。ところが1607年の時点で、英語にすると「インナー・デザイン」、この講義だったら「インテリア・デザイン」としかいいようのないイタリア語のディゼーニョ・インテルノ、「内側にあるもののデザイン化」という意味が出てき
Illustrator代替アプリAffinity Designerをセールで買ってみたけどいい感じ
Adobe Illustrator の代替アプリとして知られる Affinity Designer というMac用アプリ（¥6,000）がセールになっていたので購入してみました。 もちろん、月額ではなく買い切りのアプリです。 追記: このセールは既に終了しています。 しばらく使った感じ、なかなかよい感触だったので、使ってみて良いと感じたところと良くないと感じたところ、気づいたことなどまとめてみました。 Affinity DesignerのPhotoshop的な機能 Affinity Designer は、よく「Adobe Illustrator の代替アプリ」と言われますが、厳密には Illustrator の機能だけでなく、Photoshop の機能の一部も持っています。 具体的には以下のような機能です。 ちょっとしたビットマップ画像の修正（長方形選択ツール、ブラシツール、消しゴムツール
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する
使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー！ デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code
心地よいUIの温度 - 言葉と気遣いで高めるUI -
1. OH is a design project by yuta wariishi. website design, app UI/UX design, Branding & Logo design. Speaker No.4 / KAYAC inc. 割石 裕太 2. 割石 裕太 KAYAC inc. Designer (2012.4 - ) 自己紹介 @KAYAC inc. OH is a design project by yuta wariishi. website design, app UI/UX design, Branding & Logo design. 3. @wariemon Art Direction & Web / App / Blanding / Logo Design OH : http://wariemon.com 自己紹介 @OH (Personal
刺繍は全て手仕事！約6年かかった『乙嫁語り』アミル衣装ついに完成 | おたくま経済新聞
前回記事をお読みになっていない方のために、ざっくり内容を説明すると、大の森薫ファンであり大大大の『乙嫁語り』ファンである、コスプレイヤーの祭さん（@maturiiiiin）という方が、どーーーーしても作品と同じアミル衣装を作りたくなってしまい、作品同様に衣装の刺繍と装飾は全て手仕事で施し、似た色の糸・布・皮がなければ自分で染め、さらには作品に近いブーツが見つからないからと、モンゴルまで買いに行っちゃった！という執念の1着をご紹介しました。 制作年数は約6年。内約3年ほどは中断した時期もあったそうですが、実質制作期間だけでも3年はかかっているという衣装です。 前回は、本体衣装部分（コートや中のシャツ）はほぼほぼ完成しており、あとは帽子の刺繍や小物類の制作が残っているだけという状況。そして、2月8日開催の『ワンダーフェスティバル2015 冬』（以下、ワンフェス）での初披露を目標にしている！とい
ニッセンがTwitterで誤字→公式アカウントがよってたかって協力して1日で「激怒Tシャツ」商品化決定
カタログ通販のニッセンが「激怒Tシャツ」を発売することになりました。デザインをパインアメのパインが務め、モデルはガールズファッション誌の「Popteen」が担当。さらにシャープやキングジムといったメーカー陣も協力する豪華なバックアップ体制が特徴です。なにそれすごい！ 実はこれ、ニッセンのTwitter担当者・スミスさんが1月8日に「激怒した」を「激怒Tした」と誤投稿したことがきっかけ。これにパインの公式アカウントが、「激怒Tって激怒Tシャツみたいですね」とつぶやき、なぜかデザインのイラストまで考案します。すると、愉快な企業アカウントでおなじみの「キングジム」「森田アルミ工業」らが参戦。Popteen編集部も「モデルはPOPモデルがやってもいいですか？(前のめり)」と協力を申し出るなど、わずか1時間で一大プロジェクトに成長します。 当初は「ちょっとまって」を連呼していたスミスさんですが、やが
もしホテルの経営者が秋元康からAKBのビジネスモデルを勉強したら
こんにちは。wonder boy です。 今回は、あるホテルを紹介しようと思います。 最近泊まったお気に入りのホテルで す！…とかではなく、 うまく仕組みを考えて営業しているなと思ったので 今回はピックアップしてみました。 では、さっそく本題に入って行きましょう。 塩原温泉：ホテルニュー塩原 多くの客が集まる理由とは [ad#ad1] 今回紹介するのは、栃木県那須塩原市にあるホテルニュー塩原です。 このホテル１ 泊２食付きで８１００円とまぁ別に高くもなく、 特別安くもなくという感じなのですが、 多くのお客さんが泊まりに来るのです。 では、なぜこれほどまでの大繁盛が起こってくるのでしょうか。 確かにホテルの施設は充実していて、 カラオケもあればボーリングもできる。 さらに温泉の代名詞で ある卓球も用意されていて、 ホテル内でも満喫ができてしまうようになっています 。 遊びスポットは重要な要素
Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ
先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Adobe Photoshop Keyboard Shortcuts Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。 また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます（チートシートでは「c」がついています）。
マルチプレイヤーゲームのレベルデザインの基礎を誰にでも理解できるように説明するとこうなる
レベルデザインとはゲーム開発における作業の1つで、ゲーム中に登場するエリアの空間を設計したり、障害物やアイテムを配置したりして、プレイヤーが楽しめるステージを作成することです。ゲーム開発に携わっていない人にとっては取っつきにくそうなレベルデザインですが、レベルデザイナーのBobby RossさんがFPSやTPSなどのシューティングゲームにおけるレベルデザインの基礎を公式ブログで公開しており、わかりやすい内容になっています。 The Visual Guide for Multiplayer Level Design — Level Art+Design Portfolio http://bobbyross.com/blog/2014/6/29/the-visual-guide-for-multiplayer-level-design ◆01：デザインに考慮すべき要素 プレイヤーの行動はレベル
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
コードが教えてくれるデザイン思考
今プログラミングを教育に取り組もうという声が高まっています。CODE.orgのようなサイトも立ち上がっていますし、Scratch のような子供から楽しめるビジュアルプログラミングもあります。 デザイナーの中でもプログラミングを始めたい方もいると思います。WWDC 2014 で発表された Swift は、スクリプト言語のような感覚でコードが書けるので、始めるには良い機会なのかもしれません。 ただ、デザイナーの立場からみると、プログラミングは遠い存在に見えることがあります。しかし、「問題解決のため」という視点からみると、デザインとプログラミングには共通点がたくさんあります。人間中心デザインに基づいた発想にも、実装可能なところまで落とし込んで模索しないと、夢心地なアイデアになることがあります（もちろん自由な発想が必要なときもありますが）。コードを書くひとの考え方を取り入れることで、アイデアを洗練
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web To Figma
https://designer-draft.jp/articles/10
人工知能学会表紙の物語、思い出としての箒
音楽フェスでテント代わりになる「野外カプセルホテル」
アドビ、デジタルペン＆定規「Adobe Ink」「Adobe Slide」を披露 
ダイハツ、13個の樹脂パーツで外装を自由に変更できる新型「コペン」
2014/05/10 JAWS-UG高知 第三回 脱初心者！ AWSの情報量の波に飲み込まれない基本と応用力
