【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・

マイクロソフトが提供しているプレゼンやアプリなどに使えるアイコンを、知っている範囲で最近のものをまとめました。 Cloud and Enterprise Symbol/Icon set Cloud and Enterprise Symbol/Icon set は、UX グループが Azure 向けに作成した200個以上のアイコンセットです。PNG 画像と Visio ステンシルがダウンロードできます。 新サービスのリリース時と四半期ごとに更新が予定されているようです（現在は、4月に更新された Ver. 2.22）。アンケートやメールでのフィードバックも受け付けています。 基本は、Azure 関連のアイコンですが、一般的なアイコンも含まれています。資料作成などの用途に広く使えます。 You can use them in architecture diagrams, training mat

700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は　トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶

プレゼンテーションのスライド資料を作る上で押さえておきたい基本をまとめました． 多分これがslideshare内で一番役に立つと思います． スライドの作り方を学んだことがない方、参考にどうぞ！ 2016.01.22 書籍発売　好評につき重版決定！！ http://book.impress.co.jp/books/1114101129 リニューアル増量版 http://www.slideshare.net/yutamorishige50/ss-41321443 2014.11.9アップロード！ 【資料デザインの依頼】 > https://yoca.jp/yoca_slide > 仕事のご依頼はこちらから ※旧タイトル 【プレゼン】研究室発表のプレゼン資料の作り方【初心者用】

UIデザインの決定プロセスをより高速化するために、会議するのをやめました。会議をやめたことでより多くのフィードバックを得ることができ、デザインの修正コストを下げる事ができました。

人から受けた相談を自分の専門分野で例える人ってよくいますけど、なんでそうやって別のものに例えるんですかね。F1とかカメラとか、今そんな話をしてるんじゃないけどって思うんですが。まずりんです。さて、「デザイナー哀の劇場」、第7回は支給データに関するエトセトラです。以前はPhotoshopのデータについて書きましたが、今回はIllustrator編です。 私は以前デザイン制作会社で働いていたんですが、一番最初に指導してくれた先輩がすごくデータの作りに厳しい方で、データ制作のイロハを叩き込まれました。その方が退社後、今度は逆にデータの作り方が大ざっぱで印刷事故を数多く起こして来た先輩の下に着くことになったんですが、そこでの私の仕事はほぼ、その方が作ったデータを正しい印刷用のデータに修正するというものでした…。根本的な解決に全くなっていないような気もしますが、そこでデータの作り方について鍛えられた

Wordでは、画像や図形、テキストボックス、SmartArtの作図などを「オブジェクト」と呼ぶ。オブジェクトは文書内で自由に配置することができ、種類も使い方も多様だ（図1）。テキストボックスなら凝ったタイトルを作ったり、地図や顔写真で説明を補足したりするのに使える。画像をイメージカットとして散りばめたり、図形で流れ図を作ったりと、場面ごとに役割は異なる。肝心なのは、オブジェクトが最も効果的に見える配置やスタイルを工夫すること。まずはオブジェクト配置の基本を押さえておこう（図2、図3）。

Cisco icons are globally recognized and generally accepted as standard for network icon topologies. You may use them freely, but you may not alter them. Icons for printed collateral, Visio, video, and multimedia Use for Cisco corporate conceptual print-path icons. B/W: EPS (7.6 MB) | JPG (4 MB) PMS 3015: EPS (14 MB) | JPG (3 MB) Icons as Microsoft Visio stencils (.vss) Use in Microsoft Visio. PMS

マイクロソフト、クラウドのシステム構成図に使えるアイコン集を公開。Windows Azure以外にも一般的なシステム構成図で使えそう マイクロソフトは、Windows Azure関連のシステム構成図を描くために使えるアイコン集「Windows Azure Symbol/Icon Set」を公開しました。こうしたアイコン集はすでにAmazonクラウドがすでに公開しており、多くの利用者に使われてます。 Windows Azure用に作られてはいますが、一般的なシステム構成図のためのアイコンも多く含んでいるため、さまざまな場面で利用できそうです。公開された多数のアイコンの中から、よく使われそうなアイコンを集めてみました。 データはPowerPoint形式、Visio形式、PNG形式で提供されています。GitHubやBitBucket、DropBoxなどのアイコンもあるので、デプロイ関連の図を描く

イマドキCSS設計 NTTレゾナント　森本恭平 ※矢印キーで動かせます About Me 森本恭平 ディレクター フロントエンドエンジニア Twitter:basara669 今日のスライド http://basara669.com/slides/140122/index.html ※今日のatndやconnpassにも載っています 今日のハッシュタグ #gooOTT Agenda なぜCSS設計が必要なのか BEMとSMACSSの紹介 実際の運用上どうするべきか 本題に入る前に・・・ 様々なCSS設計がありますが、どれも複数クラスを前提としているので、IE6以下では使えないです。。

HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では

Cacoo（カクー）は、複数人で共同作業ができるオンラインホワイトボードツールです。 URLで簡単に共有でき、操作も直感的。チームの意見をまとめたり、議論しながら目標を設計するなど、合意形成の場面で気軽にご利用いただけます。

少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し