エンジニア向け デザイン基礎（社内勉強会の資料） - Qiita
これは何 私が所属している株式会社エイチームでは社内勉強会を自由に開ける制度があります。 エンジニア向けにデザインの基礎をレクチャーする会を開いたのですがせっかくだったらオープンにしようと思い、投稿しました。 今回の勉強会では「Webサービスを作る」レベルまでは踏み込めませんでしたが、ちょっとしたUIを作る際の手助けにはなれる気がしています。 なお、勉強会用に書いた原稿なので書き言葉としてあまり適切でない箇所もあります。 ご了承ください。 また、この研修の次の年に行った研修も記事として投稿しています。 設計の話 はじめに：デザイン業務の内訳とよくある誤解 デザイン業務の内訳 まず最初に設計の考え方をレクチャーするのですが、その前に1つ。 普段デザイナーが行っている業務について簡単に説明します。 後の方で話す内容と繋がってくるので、ちょっと本筋から外れますが聞いてください。 話を分かりやすく
続エンジニアだけでアプリアイコンを作る - Shoichi Matsuda's diary
昨日「エンジニアだけでアプリアイコンを作る」を書いたのですが、500はてブ以上と思わぬ反響をいただいて驚いています。 ほぼツールの紹介だったので大方予想はできていたのですが「で、結局絵はどう書くの？」といったコメントを多くいただきました。 このあたりについてもどのようにやってきたかをざっくりですが紹介しておきたいと思います。 アイコンを書けるようになるまで 模写する 勉強する 自分なりに作る（ゴール） ざっくり言うとこの３つの手順です。 あくまで「なんとか書けるようになるまで」なのでデザイナーさんから見ればまだまだなレベルにしか到達しないでしょうが、やれないよりはマシなはずです。 模写する まずは今あるアイコンと同じものをとにかく作っていきます。 ここでの主な目的はツールの使い方を把握することです。（前記事ではInkscapeを紹介しました） 10個ほど作ればおそらくツールの使い方はほとん
スポーツカー意識したトラクター ヤンマーが試作機 - 日本経済新聞
ヤンマーは25日、トラクターの試作機を発表した。イタリアの高級車メーカーのフェラーリなどで設計をした経験のある工業デザイナーの奥山清行氏を迎えて開発した。ボンネット部分をスポーツカーのようなデザインにしており、これまでの農機とは一線を画したという。2015年には量産モデルを開発し、国内市場に投入する考えだ。試作機は運転席（キャビン
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
UIデザイナーが知っておくべきエンドユーザーの10の特徴
ユーザーの視点に立ってデザインされていないインターフェースは、エンドユーザーに受け入れてもらえないはずだ。そこで本記事では、UIデザイナーが念頭に置いておくべきユーザーの習慣や考え方について焦点を当てる。 つい最近、「Ubuntu Unity」はUbuntuに正式搭載されてから1周年を迎えた。また、「Windows 8」はリリースを間近に控えている。こういった状況のなか、すべてのユーザーインターフェース（UI）は同じように作られていないという事実が明らかになってきている。実際のところ、コンピュータの使い方に革命的な変化をもたらすような素晴らしいUIデザインもあり得るだろうが、エンドユーザーを念頭に置いていないものは、その素晴らしさを証明する間もなく失敗作という烙印を押されてしまうはずだ。 筆者は長年に渡るコンピュータ経験のなかで、ほとんどすべてのLinuxデスクトップと、あらゆるバージョン
なぜそこまでやった、開発者コミュニティの異種格闘技「超エンジニアミーティング」エンジニア100連発、日本Rubyの会、java-ja
会場は、さまざまな企画のブースが並ぶ一角。しかもすぐ隣の「超軽音部」のバンド演奏が流れてくるという、実に混沌とした空間だ。会場の壁にはニコニコ動画のような「字幕」が投影されている。すぐ隣ではバンド演奏があり、定時には「時報」のアナウンスが流れ講演をかき消すという、難条件のもとでの勉強会である。 しかし、四方から這い寄る混沌をものともせず、開発者コミュニティはそれぞれの精鋭を差し向けて、圧倒的な才能の無駄遣いぶりを披露。さながら“異種格闘技”のような世界と化していた。 五十嵐氏の基調講演「デザインのためのインタフェース」 基調講演は、 五十嵐健夫氏（東京大学大学院情報理工学系研究科コンピュータ科学専攻 教授／JST ERATO 五十嵐プロジェクト研究総括）による「デザインのためのインタフェース」。五十嵐氏は、研究成果を次々と鮮やかなデモンストレーションで見せていった。 五十嵐氏は、まず、普通
フロントエンドがやっておかなきゃいけない、iPhone(スマホ)向けサイトを軽量化･高速化するための必須項目をメモ。 | Mnemoniqs Web Designer Blog
Webサイトの待ち時間の80％はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
WEBシステムのデザインについて今の会社を退職する前に私が後輩に伝えたこと
このたび会社を退職することが決まり、デザインについてほとんど初心者である後輩に対して私の思考を託す時が来ました。 私自身WEBシステムの制作を手がけたことはなく（ないのかよ！！と全力でつっこんでおｋ）今度のプロジェクトでうちのチーム初のWEBシステム制作案件があるそうなので、デザインする時のポイントなどを自分なりにまとめてみました。 私は携われないんですけどね＼(^o^)／ 様々なWEBシステムのデザイン よいデザインはデザインをする対象（今回はWEBシステム）のことを知らなければ出来ません。 自分の考えだけでデザインをはじめると、思考の偏った使いにく～いものになってしまう恐れがありますので 必ず調査をしましょう。 そして、何故その要素がそこに配置されているのかを考えましょう。 以下に様々なWEBシステムのキャプチャと 超稚拙で言葉足らずな安易すぎる説明を掲載します。 ですが、掲載されてい
パワーポイント、キーノートの無料デザインテンプレートやプレゼン情報／P-ralay-デザインレイアウトノウハウブック
デザインレイアウトのノウハウを無料配布しています。 プロではないけれど、デザインのことも知っておきたい方、 デザイナーを目指している方、 もう一度基礎を確認しておきたい方を対象に、 特に重要な原則のみを5つに絞って記載しています。 1.優先順位をつける 2.グループに分ける 3.余白をつくる 4.空きを揃える 5.図版を使う A4サイズの用紙に収まるB5サイズのPDFです（全16ページ）。 ご家庭のインクジェットプリンターでもご利用いただけます。 下部ダウンロードボタンからご利用ください。 ご意見ご感想もお待ちしております。
デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素
元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗ はじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ
全てのデザイナーが見るべきIllsutratorのチュートリアルビデオ30 | WEB WORLD BLOG
海外の有名デザインブログ「Blog.Sppon Graphics」でIllustratorのチュートリアルビデオを紹介したエントリー「30 Illustrator Video Tutorials Every Designer Should See」がありましたのでご紹介します。 新しいアプリケーションを習得しようとしている場合、様々なメニューやツールを通して、その道のエキスパートがガイドしてくれるものほど良いものはありません。この記事は最も詳しく解説された30のAdobe Illsutratorのビデオチュートリアルとスクリーンキャストを集めた記事です。それぞれの特徴を生かした明快な解説と役立つテクニックは、あなたのIllsutratorのプロへの道の手助けとなるでしょう。 Digital Inking Demonstration & Tutorial How To Setup and D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これを見逃したら絶対損！ノンデザイナーズ・デザインブック 20周年特別PDFは内容豪華で、応募者全員がもらえる
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
html5-memo.com
IDEA * IDEA
企画が考えるスマホUIデザイン
人気の映画タイトルで目にする35のフリーフォント
Amazon.co.jp: 佐藤金属興業 SALUS デイリー バナナツリー 日本製: 家庭用品
