【追記あり】【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう | WP-E (仮)
みなさんこんにちは！無事大学の卒業が確定して一安心のmegです。今回は初心者向けの記事としてデザインの基本についてまとめてみました。デザインに興味はあるけれど何を勉強すればよいのか分からない方、これからデザインについて学ぼうと思っている方の参考になれば幸いです♪ 目次 デザインとは何か 「デザイン」という言葉の意味 ソール・バスとスティーブ・ジョブズの言葉 デザインの４つの基本原則を知る ‐『ノンデザイナーズ・デザインブック』より 近接 整列 反復 コントラスト まとめ – 【2014年3月9日18時27分「概念とテクニックは繋がっている」を追記しました】 １、デザインとは何か １－１、「デザイン」という言葉の意味 皆さんは「デザイン」と聞くとどんなことをイメージしますか？オシャレなこと？洗練されていること？私たちはなんとなく見た目が美しいことや、ぱっと目を引くものなどを想像しがちですが、
書籍『なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉』刊行のお知らせ
よりよいデザインにするために、デザイナーが頭の中で考えていることを、作例などのビジュアルとともにわかりやすく解説したデザイン書籍『なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉』が2015年7月31日に刊行されました。著者は、株式会社コンセントのアートディレクターの筒井美希。 本書は、デザインに興味があるすべての人に、楽しく読んで「なるほど！」と理解いただけることを目指し、3つの章で構成されています。 Chapter 1「編集×デザイン」では、まずはなんのためにデザインするのか、その目的を理解した上でその目的にふさわしいデザインを導き出すことの必要性を、目的別の作例を通して説き、さらに最終アウトプットとしてのデザインを考えていくまでの過程をプロセスを追って説明しています。 「デザイナーの7つ道具」と題したChapter 2では、デザインのコツや気をつけるべきポイントを、「天秤」や「
エンジニアがデザイン入門書を3冊買ってみたのでメモと雑感 - エンジニアをリングする
自分で何かWebアプリを作るときにデザインも自分である程度満足いくレベルのものをできるようになりたくて、今年に入ってからいくつかデザインの本を買いました。 感想と勉強になったことをまとめてみます。 ノンデザイナーズ・デザインブック ノンデザイナーズ・デザインブック [フルカラー新装増補版] 作者: Robin Williams,吉川典秀出版社/メーカー: 毎日コミュニケーションズ発売日: 2008/11/19メディア: 単行本（ソフトカバー）購入: 58人 クリック: 1,019回この商品を含むブログ (107件) を見る 定番・・・なんですかね。どこかでデザイン初学者向けにオススメされていたのをみて買ってみました。 とても教科書っぽいです。ただ文章は程よく砕けていて読みやすく、理論をベースに実際の例をたくさん挙げて説明されているのでとっつきやすいです。 特に参考になった章：7章 Usin
Cloudcraft – Draw AWS diagrams
Visualize your real-time AWS or Azure architectures and assess cost with professional diagramsTry Cloudcraft FreeRequest a Demo Whether you’re building a cloud architecture from scratch, documenting your current environment, or looking to optimize cloud cost, Cloudcraft allows you to visualize and communicate your architecture with ease. Build diagrams from scratchCreate a professional architectur
Bootstrapよりキレイ！Googleのマテリアルデザインキット - ku-sukeのブログ
Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io
「五輪エンブレム」に思う、ロゴ・エンブレムデザインとは？ - デザイナーのイラストノート
本日、2015年8月5日に行われた「五輪エンブレムについての記者会見」を拝見して、佐野研二郎さんのファンのひとりとして、デザインに携わりデザインを信じるものとして思うところがあったので書きました。記者会見の様子はこちら「五輪エンブレム問題 制作者の佐野研二郎氏が5日に会見｜BLOGOS」。 デザインは「見た目」だけではなく「問題解決」です。その中にあってロゴデザイン・エンブレムデザインというのはまた特別なもので、例えば会社のロゴ・エンブレムは、単に社名を伝える役割だけではありません。 有名なエンブレムで言うとメルセデス・ベンツやアウディは、丸や直線を組み合わせた非常にシンプルな形ですが、そこにはきちんと意味が込められています。 メルセデス・ベンツの車体に輝くエンブレムは、合併前のダイムラー社が使用していたスリーポインテッド・スターとベンツ社の円形月桂冠とを併せデザインされたもので、3点には
デザインワークをGitに含めるべき? 含めないべき? - Qiita
「プログラマ業界」であればコンパイラの多くがオープンソース化されていますが、デザインツールはAdobeを筆頭に今もほとんどがプロプライエタリなツールです。そのことが、原理原則に沿うのを難しくしています。 複製不可能な部分に価値を置くという文化的な面 ツール開発にコストがかかるという金銭的な面 もあって、ツールがオープンに向かうことは当面なさそうです。Blenderという例外はありますが、GimpやInkscapeは実質プログラマだけのためのツールになっています。そういえば、Fireworksのオープンソース化嘆願はどうなったんだろう...? ツールが有料 デザインツールはときに高額です。また、セットアップに割く時間も「見えない」コストです。残念なことにインストールも自動化されていません。caskも使えません。$ npm installでは片付かないのです。また、アップグレードの問題もありま
あの頃みんな若かった。国内有名16サイトの2008年→2014年のデザイン比較
こんにちは、結婚式で悪友に高校時代のポエム的なものを晒されたゆうすけです。 そういうの、本当勘弁してほしいんだよな。 先日Macの古いデータを整理していたところ、2008年頃のウェブサイトのキャプチャー画像を大量に発見。当時はWebデザイナーではなくエディトリアルデザイナーだったのですが、デザインの練習（模写）のために取り溜めていた様子。 あの頃の自分は結構真面目だったのかもしれない。 やっぱり今とだいぶ違うなー。具体的にどこが変わったのかな？と結構楽しく眺めていたのですが（どうしてアナログデジタル問わず、掃除をすると懐かしくて手が止まってしまうのか！）、せっかくなので記事としてまとめてみることにします。 当時の担当デザイナーがもしこれを見たら、恥ずかしくてたまらないかもしれないですけどね。一度世に出したものですからね。しょうがないね。 大阪府知事に橋下徹氏が就任し、船場吉兆があの伝説的な
Web・アプリ開発に使える無料のワイヤーフレームツールまとめ
Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。 以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい！という方は要チェック。 無料で使えるワイヤーフレームツールまとめ JUSTINMIND こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ＆ドロップでコンテンツを追加することができます。 Wireframe CC こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集す
エンジニアがデザインの設計を学ぶのに良いサイトまとめ - Qiita
デザインにもシステムと同じように設計と実装があると考えるなら、今回は設計に役立つツールばかりを集めた。 色 colourlovers 「[ベースカラー:メインカラー:アクセントカラー＝7:2:1]の色が決められないんじゃボケぇ」って思ってたら出会った 「色も設定より規約(CoC)」ということで、色パターンパクる。デザインセンス皆無なのでテンプレを繰り返すのじゃ。 [地味な色:好きな色:目立つ色]って考えたら覚えやすかった colourco.de 色々な色を試せる 「和風」「中華風」「欧風」「フラット」みたいに自分でテーマを決めて色を並べるの楽しい。 とにかくたのしい 美的センスを養う Pttrns スマホデザインの宝庫 モーダルとか読み込み時とかちょっとした背景とか勉強になる その画面を構成要素に分解すると、割と技術的には簡単だったりする。「モーダルウィンドウ＋おしゃれフォント＋ピントずら
gulpfile スタイルガイド - v0.5.0 - Qiita
このドキュメントは、gulpfileの再利用性/メンテナンス性を高めることを目的とした、非公式なスタイルガイドです。 更新情報 2014/10/05 - バージョン番号つけました。 2014/10/04 - 「タスク辞書」あらため「タスクの共有」に。以前の内容はgulpfilesとして別ドキュメントに。 はじめに gulpfileはgulp.jsのタスクを定義するファイルです。スクリプトファイルなので自由に書ける反面、プロジェクトが大きくなると、書式を統一が問題になります。そんな時、このスタイルガイドが役に立つでしょう。対象となるのは次のようなケースです。 gulp.js に慣れて来て、再利用性のあるタスクを書きたい チームで運用する必要があり、書式を統一したい スタイルガイドとして、下記を参考にしています。また、ここで述べない JavaScript / CoffeeScript の言語と
アイコン画像をSVGスプライトにしたい話 - Qiita
SVGスプライトにしたい理由 スプライト生成を自動化したい アイコンのちょっとした色変更などでPhotoshopを開くのがつらい アイコンフォントかSVGかData URIかビットマップか SVG 多色にも対応したいから 楽にレイアウトしたいから HTMLを汚したくないから モダンな感じにしたいから SVG画像呼び出しの選択肢 個別ファイル スプライト fragment identifiers方式（一般的なCSSスプライトと同じ） stacks方式（SVGでレイヤーを重ねて、その表示／非表示を指示する） インライン記述： HTML内にXML形式で記述するため、CSSやJavaScriptでの制御に対応 defs方式（ defs タグで記述） symbols方式（ symobls タグで記述） どれにするか 上記のなかだったら、インライン記述が良さ気かな…？ 個別ファイルだとリクエスト増える
HerokuのAPIデザイン
Herokuが自ら実践しているAPIデザインガイドをGithubに公開した． “HTTP API Design Guide” このガイドは些細なデザイン上の議論を避けて，ビジネスロジックに集中すること目的としている．Heroku特有なものではなく，一般にも十分適用できる知見となっている． 最近は，モバイル向けにAPIをつくることも多いため，勉強もかねて抄訳した．なお内容は，HTTP+JSONのAPIについて基本的な知識があることが前提となっている． 適切なステータスコードを返す それぞれのレスポンスは適切なHTTPステータスコード返すこと．例えば，“成功"を示すステータスコードは以下に従う． 200: GETやDELETE，PATCHリクエストが成功し，同時に処理が完了した場合 201: POSTリクエストが成功し，同時に処理が完了した場合 202: POSTやDELETE，PATCHリク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社MIXI
Facebook
サーバにログインしない・させないサービス運用 / AWS Summit 2015 Devcon
【前編】エンジニアの会社でデザインがうまくいくワケ〜「エンジニア病」にはダメ出しされよう
Tsutomu Kawamura (@cognitom) on Speaker Deck
IDEA * IDEA
GitHub - interagent/http-api-design: HTTP API design guide extracted from work on the Heroku Platform API
