Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
Sublime Text 2 のショートカット 12 選（Win、Mac両方） ｜ クラスメソッド開発ブログ
1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方） 今、巷で話題になっているエディタ Sublime Text 2 ですが、 最近社内のプロジェクトでも使用する機会が多くなってきました。 Sublime Text 2 http://www.sublimetext.com/ インターフェースがシンプルで高速、 機能を強化するパッケージも豊富で、Gitとの同期も快適です。 このブログでは、1ヶ月プロジェクトで使ってみて、 とても便利だと思ったショートカットを12個紹介します。 自分自身会社ではWindows、自宅ではMacなので、 Windows版とMac版の両方をメモ代わりとして記載することにします。 1. マルチセレクト このショートカットは複数の文字列をインタラクティブに選択し、一度にまとめて編集することができます。 OS X：⌘
Sublime Text 2の基本とカスタマイズ【Vim風】
2012年12月4日：Vim化について指摘と参考になる情報をいただいたので追記しました。 こんにちは、僕はVimユーザーです（ちなみにVimを完璧に使いこなしているわけではありません）。 今更ながら「Sublime Text 2」というナウでヤングなエディタも使いこなせるようになりたいと思い、Sublime Textの基本設定からプラグインやスニペットの作り方まで調べた内容をこの記事にまとめることにしました。 細かい情報までまとめることはできなかったので、より詳しい内容を紹介してくださっているブログやサイトへのリンクを設けています。 この情報以外にもSublime Text 2をVimに近づけるプラグインやカスタマイズ方法があればコメントいただけるとうれしいです。 また、間違いがあればコメントいただければすぐに直します。よろしくお願いします！ Sublime Text 2は有料（$59）の
[UX][デザイン]中島聡氏とのトークセッション 〜スマートフォンの先にあるもの〜 @ZEPPELINに参加してきました #zeppelin | DevelopersIO
はじめに 「中島聡氏とのトークセッション 〜スマートフォンの先にあるもの〜 @ZEPPELIN」に参加してきました。セッションの内容をレポートいたします。 イベント概要 MicrosoftでWindows95、98のチーフアーキテクトを務められ、スーパーエンジニアとして有名な中島聡氏をメインゲストにお迎えし、「スマートフォンの先にあるもの」をテーマに語っていただきます。 10年後、20年後に、この世の中がどう変化しているのか…未来における、テクノロジーとUXの関係性について聴き、対話形式で中島氏と意見を交換できるチャンスです！ セッション1「JARVIS」- 鳥越 康平さん ZEPPELINについて ビジョン "WE CREATE BEAUTIFUL WORLDS" 製品を使う人の振る舞いさえも「美しく」なるようなモノをつくる スマートフォンの問題点 生活を良くしているが、悪い影響もあるん
![[UX][デザイン]中島聡氏とのトークセッション 〜スマートフォンの先にあるもの〜 @ZEPPELINに参加してきました #zeppelin | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da6328f8613d3f22dab21ae3790ab0f72d2e3d/height=288;version=1;width=512/https%3A%2F%2Fimages.ctfassets.net%2Fct0aopd36mqt%2F1dD7b8HkT2sbiJzUIewMTD%2Fe5cdc6f33c4fdd9d798f11a4564612ff%2Feyecatch_developersio_darktone_1200x630.jpg)
デザイナーとプログラマの共同作業 ｜ DevelopersIO
健康診断の結果が思ったより悪くて、ちょっとへこんでいるたごです。こんにちは。 今回はよくある話題ではありますが、デザイナーとプログラマの共同作業について書いてみたいと思います。 はじめに アプリケーション開発をするにあたって、デザイナーとプログラマの共同作業にはずっと課題がつきまとってきました。 互いの理解不足によるすれ違いだとか、一つの成果物を作り上げるのに両者でどう分業すればよいかとか。 前者は人と人の問題なので互いに歩み寄って行くしかありませんが、後者の課題にはこれまでもツールやフレームワーク、開発プロセスの面から解決の工夫がとられてきました。それによって最近はだいぶやりやすくなったんではないかとは思いますが、万事解決というわけには行かないのが実情です。 まあ理想としてはデザインもプログラミングもどっちも得意な人がやってしまえばいいんですが、そういうスキルを持った人をメンバーに集めら
「深津貴之氏に学ぶ、スマホUI/UX講座 〜iOS7についての考察とfladdictデザイン論〜」に参加してきました。 | DevelopersIO
「デザイン = かっこ良くすること」だとは限らない。 デザインとは? 設計 複雑な問題を整理して解決すること わりとエンジニアリングに近い 文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。 ヒューマンインターフェースの原則 インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡し ヒューマンインターフェース = 人とモノをつなぐもの ヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則 1.必然性のあるビジュアル 機能と外見が調和しているか？ TPOにあわせた格好をさせる ユーザーとコミュニケーションを取る ドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな) 機能に最適な外見を与えることで... 使い方がつたわる。 とっつきやすくなる 2.一貫性 アプリ全体でル
ローカルで GitHub を構築！ Git リポジトリ管理ツール「GitLab」を Mac OS X にインストールしてみた | DevelopersIO
ローカルで GitHub を構築！ Git リポジトリ管理ツール「GitLab」を Mac OS X にインストールしてみた GitLab とは GitLab は Git リポジトリを簡単に管理できるツール Gitolite をブラウザから管理できるようにする Ruby アプリケーションです。 GitHub のオープンソースクローンと呼ばれることから分かるように、UI が GitHub とめっちゃ似ています。 GitHub みたいなサービスを使いたい！だけど Public はアレだなということもあると思います。そんなときに便利です。 社内 GitHub として使うケースが主なユースケースだと思います。 しかもすべてローカルだけで作ることができるので、ローカルマシンにインストールすれば、構築後はネットワークなしで GitHub 的な環境を使うことができます！ そんな GitLab を Mac
HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
UXの心得14か条(“KILLER UX DESIGN”より) | DevelopersIO
こんにちは。マーケティング担当のタケハラマサシです。 諸般の事情により今回から開発ブログで書かさせていただくことになりました。 クラスメソッドがやっているAWS、iOS、Android、HTML5やデザインのことはよくわかりませんが、楽しいエントリーを心がけて精進したいと思います。 ちょっと前に”KILLER UX DESIGN”という本をパラパラとみてみました。最近は、UXデザインに関する書籍もそこそこ数多くでるようになりました。その中でも”KILLER UX DESIGN”は挑発的なタイトルとは裏腹に、UXデザイン全体を RESEARCH、INSIGHT、CONCEPT、DESIGN の4フェーズに整理したり、そもそもちゃんとビジネスから入ろうという説明を指定たり、途中途中でアジャイルっぽくやりなさいと言ってみたり、わりと新しい書籍らしくいい感じになっています。分量も抑えめですし。 詳
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
