RE: UXの本質について - UXploration
UI/UXという並列表記は基本的に信用しない。これは、長谷川さんと話していると良く話題に上がります。 ((c) The Gap between UI and UX Design - Know the Difference) UI/UXの並列表記問題 某中途採用の求人検索サイトで "UI/UX" と入力して検索してみたところ、900件以上の UI/UXデザイナーの求人が掲載されていました。職域や必要なスキルは実に様々で同一の枠を争っている様子があまり見られないことが特徴です。"UI/UX" という旬なキーワードを盛り込み、場合によってはすべてをお任せしたい、そんなミーハー感が漂っているようにも思えます。長谷川さんのブログでも「UXの本質」と題して言及されていますが、UI/UXという誤用の弊害のひとつに、課題意識を狭めてしまうことがあります。 ("UI/UX" の検索数はここ1年間で2倍に)
pushStateとAjaxの組み合わせpjax - Qiita
site: http://develo.org/2014/04/29/1614.html サイトをpjaxを使って実装して思ったのですが、ページ移動がものすごくはやくて快適！今後サイト新しく作るときはpushStateとAjaxの組み合わせ検討してみてもよいかなぁって思いました！ pushStateとは Ajaxなどで、非同期なサイトを作る際に、 アドレスが変更されない問題をjsで解消してくれる便利なやつです。 少し前の話だとFlashサイトを作るときに#（ハッシュ）をつけてurlを管理したりしていました。 pushStateを使うと普通にページ遷移しているようにアドレスを変更することができます！ Ajaxとは ページを遷移せずに情報だけを非同期でとってきてサイトに描画する仕組みのことです。 pushStateとAjax 2つを合わせてつくった仕組みのことです。 実際に作るにあたり 下記を
jQueryにおけるattrとpropの違いと使いドコロまとめ - Qiita
checkboxやradioのチェック状態を調べる際にはattrではなくpropを使うのが良い。 attrでも取れないこともないですが、propで取得する方が処理が早いです。 特にIEの場合、inputに対するdisabledの処理がものすごく重く、attrでdisabledやcheckedの処理を沢山していると、無駄に最悪な感じで負荷がかかります。 attrとpropの取得の違い またこの２つは、同じ値を取得してるようで異なる値を取得するので注意。 例えば //チェックした値を取得するよー $(":checkbox").click(function() { alert($(this).prop('checked')); alert($(this).attr('checked')); }); の場合、 チェック時 prop true attr checked 非チェック時 prop fal
I/O 2014 アプリに学ぶマテリアルデザイン
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Compass使うのやめた
前から思ってたんだけど、Gulp使い始めたのをきっかけにCompass使うのやめた。 コンパイル遅いCompass、とにかくコンパイルが遅いという感じだった。 普通にcompass watchしてやる分には問題ないんだけど、GruntやらGulpやらを使ってCompassのコンパイルをするととにかく遅い印象。5〜10秒くらいかかる。Middleman使ってコンパイルするとそこまで遅くないので、タスクランナーのプラグインの問題っぽい(無知)。 でもいつもMiddleman使うわけではないし、やっぱり遅いのはイライラするので使う気がなくなった。 Sprite画像生成するとさらにヤバいCSS Sprite用の画像を生成させると、とにかく遅くて重くて辛い感じになる。最近はSprite Smithとかもあるので、CompassでCSS Sprite生成する意味がそこまでない。 ベンダープレフィックス
Gulp使い始めた
みんなGulpGulp言ってるので僕もようやく使い始めた。 gulp.js - the streaming build system 何が良さそうか設定ファイル(gulpfile)が簡単に書ける気がする動作軽い気がするプラグインもいっぱいあるなんかこんな感じ。 gulpfileが簡単に書けるのはホントその通りで、実際に「Gulp使えるようになるか」と思い立っていろいろサイトを見て、2時間後くらいには自分でなんとなく書けるようになった。 インストールGulpインストールする$ npm install --global gulp ディレクトリに移動$ cd (プロジェクトのフォルダ) 依存ファイルのインストールgulpfile.jsやpackage.jsonがある前提。 $ npm install Gulp実行$ gulp Gruntと何ら変わりはない。 package.json{ "name
わかりやすいREADME.mdを書く
GitHubなどに自分のツールやライブラリを公開するとき，README.mdは重要な役割を担っている．レポジトリを訪れたユーザが自分のツールを使ってくれるか否かの第一歩はREADME.mdにかかっている，と言っても過言ではない．実際自分が使う側になったときも，まずREADME.mdを読んで判断していると思う． 成功しているプロジェクトを参考にしつつ，自分が実践していることをまとめておく．ここに書いていることはあくまで（自分の中で）最低限的なものである．プロジェクトが成長していくにつれてREADMEはあるべき姿に成長していくべきだと思う． READMEの役割 README.mdには大きく2つの役割がある． プロジェクト，ツールの使い方，インストール方法 プロジェクト，ツールの宣伝 元々READMEは前者の役割しかなかったが，GitHubの仕組み上，後者の役割も徐々に重要になっている． さらに
gulpとかnpmのこととか – A Memorandum
最近、Gruntからgulpに切り替え始めている人が増えている気がします。この数ヶ月でいろんなブログなんかでも導入記事が増えてるようですが、ひとつ言っておきますと「数ヶ月前の記事は鵜呑みにしてはいけない（というか、そのままだと動かないこともありうる）」かな〜、なんて。 あれがどうしたこうしたと質問を受けたりするんですが、いろんな人がはまってる原因はそこら辺にある気がしてならないのですよね。そんなわけで、ちょっとその辺の話をまとめておこうかと立ち上がった次第です。 ※この記事は2014年7月30日時点のものですので、数ヶ月後にコレを読んでる方はご注意を。 アップデートの頻度が高いので… こういったツールのアップデート頻度は高いものですが、gulpのバージョンアップ頻度もまぁまぁで現在の最新版は「v3.8.6」になっています。プラグインを使えばあらゆる機能を追加することができますが、そういった
gulp vs Grunt - lxyuma BLOG
概要 gulpの入門記事を以下に書いて行きます。 目次 gulpとは gulp sample gulp支える技術(Streamと並行性) grunt vs gulp どっち使う? gulp.jsとは いわゆるフロントエンド周りの task runner build tool Gruntあるでしょ その通り いわば、Gruntの簡易版 去年位?出来た後発のtool 最近、blog記事も増えてきた 公式Page売り文句 複雑なtaskも管理し易く、simpleで、使うのが簡単 一時fileのdisk書き込みが無いので早くて能率的 simpleで期待通り動くようにPluginのGuidelineがある APIが小さく学習時間かからない リソース gulp公式page 入門記事 クラスメソッドさんの入門記事 shuheiさんのqiita記事 sample多め anatooさんの入門記事 Shump
これからのWebデザインはIllustrator派が増えてくるのでは？ | 5 LOG
個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか？ そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ（ナビゲーションとかボタンとか見出しとか）が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる
Sublime textでコードをなるべく楽に綺麗に書くための機能紹介 3つ - megane9988のブログ
1. コードフォーマット パッケージとして提供されている HTML-CSS-JS Prettify を導入する。使い方はソースコードで右クリックして、Prettify Codeを選択。ショートカットは Shift + Command + H。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。 コードフォーマットの設定 Prettify Code コードフォーマットにおけるデフォルトでのインデントの設定はスペースです。設定変更や拡張子の追加などを行う場合は、Performance→Package Setting → HTML/CSS/JS/Prettify → Set Prettify Setting と進むと、設定ファイルが表示されます。(コマンドパレットからも呼び出し可。) インデントの設定を変更する場合は インデントの文字をスペースからタブに dent_cha
デキるプログラマだけが知っているコードレビュー7つの秘訣
SonicGarden Study #11で放送された資料から一部スライドを抜いたものになります。 http://sonicgarden.doorkeeper.jp/events/13229 ----- 優れたプログラマだけが優れたソースコードを書くことができます。 では優れたプログラマになるにはどうすれば良いでしょうか。 自分の書いたコードを、優れたプログラマに指摘してもらうことが一番の近道です。それがコードレビューです。たった一人でコードレビューも受けずに、ただ書き続けてもクソコードはクソコードのままなのです。 そこで今回は、良いコードが書けるプログラマになるための、コードレビューを上手に実践する秘訣を話します。Read less
「アジャイル開発」って何がいいの？--アジャイル開発を実案件に生かすための基礎知識
柏木雅之、山下博之 （IPA SEC エンタプライズ系プロジェクト） 2011-05-25 12:00 皆さんは「アジャイル開発」と聞くとどんなイメージを思い浮かべるでしょうか。語源となっている英語の“agile”を辞書で引くと「俊敏な、迅速な」という意味が載っています。そのとおり、刻々と変化する市場の要求、顧客の要求に迅速に対応していくというのが基本的なアジャイル開発のあり方です。 本連載では3回に渡り、アジャイル開発の採用を検討している方々に対して、その基本的な事項を解説していきたいと思っています。本連載によってアジャイル開発への理解を深めていただくきっかけになれば幸いです。 「ウォーターフォール型」の限界 アジャイル開発の説明に入る前に、「ウォーターフォール型開発」について見ていきましょう。 システム開発には納期が伴います。開発サイドは決められた期間内に要求通りの機能を実現し、顧客に
「アジャイル」と「ウォーターフォール」 - Digital Romanticism
アジャイルがダメだと思う7つの理由へのだいぶ遅い反応 導入 もうだいぶ前の話になってしまいましたが、アジャイルに関するブログエントリ「アジャイルがダメだと思う7つの理由」は予想以上に波紋を呼び、それに呼応していくつものエントリが公開されました。発端となったエントリに関していうと、通常であれば必要となる数々の留保事項や前提事項を書かずに切り込んでいるという点において、間違いなく「煽り」であると言えます。ただ、「アジャイル」という言葉をとりまく数々の事象をかなり的確に指摘することによって、「アジャイル」という言葉をパブリックな場所で語っている少なからぬ人たちに対して、（意識的か無意識的かは問わず）ある種のポジショニングを強いたという意味で、実にいい釣り針なのではないでしょうか。 個別の論点に関する「アジャイルでは全体スケジュールにコミットできない」「いや、アジャイルだって全体スケジュールにコミ
私がアジャイル崇拝をやめてウォーターフォールを愛するようになった7つの理由 - カイゼンにっき。
アジャイルがダメだと思う7つの理由 - arclamp にインスパイアされて、自分なりの考えをまとめてみました。一部SI前提で書いています。 制作（および詳細設計・結合テスト）フェーズの全体スケジュールを見通しやすい 確かに、全体スケジュールの完全なコミットメントは不可能です。しかし、少なくとも、信頼性の高い見通しは必要です。そもそも予算が下りません。顧客側組織の予算編成・執行体制を変えるべきだ、何て寝言を言えるはずもありませんし、見通しもなしに予算を出すべきだとも思えません。 ウォーターフォール型の開発プロセスでは、開発プロジェクトの大部分を占める制作（および詳細設計・結合テスト）フェーズの全体スケジュールを、先行する計画・設計のフェーズでじっくりと吟味します。 ウォーターフォール型の開発プロセスは、問題があった時に調整が効かないかのように言われています。しかし、ウォーターフォールにはフ
アジャイルはウォーターフォールよりも難しい
ここにきて、アジャイル開発手法を業務システム（アプリケーション）の開発に適用しようとする動きが本格化している。これまで小規模、Webシステムへの適用が目立ったが、最近は業務システムや大規模プロジェクトへの適用事例も出てきた。アジャイルはもはや“ブーム”ではなく、本格的な普及が始まったと見てよさそうだ。 ところが、実際にアジャイルを採用した現場に話を聞くと、何とことごとく失敗している。そもそもアジャイルは、大規模プロジェクトを想定していないし、請負契約が多い国内のプロジェクトは、要求の増加に歯止めが利きにくいアジャイルと相性が悪い。さらに業務システムへの適用となると、コストや納期の制約があり、品質優先で開発を繰り返しながらシステムを成長させていくアジャイルと考え方が相反する面がある。 それでも開発現場はアジャイルに望みをかけている。刻々と変わる要求やリスクに迅速に対応する必要があるからだ。最
ウォーターフォール開発とアジャイルの本質 - プロマネブログ
以下、３部作の１本目です。 ウォーターフォール開発とアジャイルの本質 - プロマネブログ サルでも分かるアジャイルとウォーターフォールをハイブリッドしたマネジメント・デザインパターン - プロマネブログ 炎上プロジェクトの責任はプロマネが９割 - プロマネブログ 度々話題なる開発手法、ウォーターフォール開発（以下WF）とアジャイル。 それぞれの違いってなんだろうと思い、ちょっと本質について普段考えていることをまとめてみました。 ウォーターフォール開発の本質とはなにか？ システム開発を行った方なら一度は耳にすることがあるWF。 各開発工程を順序良くこなしていく開発手法となります。 イメージにすると以下のとおり。 さて、WFのよく言われる特徴を以下眺めてみたいと思います。 最初に一括して要件定義を行うので、仕様変更に弱い No。一括して要件定義を行うこと自体は、要件定義のやり方の問題です。一括
サルでも分かるアジャイルとウォーターフォールをハイブリッドしたマネジメント・デザインパターン - プロマネブログ
ウォーターフォール開発とアジャイルの本質 - プロマネブログ 以下、３部作の２本目です。 ウォーターフォール開発とアジャイルの本質 - プロマネブログ サルでも分かるアジャイルとウォーターフォールをハイブリッドしたマネジメント・デザインパターン - プロマネブログ 炎上プロジェクトの責任はプロマネが９割 - プロマネブログ 前回と今回のシリーズはカテゴリ プロジェクトマネジメント論にまとめてます。 単一の開発手法の限界からハイブリッド方式へ 前回、各開発手法は失敗プロジェクトの反省から、それぞれ本質となる改善要素を持つことを示しました。 ウォーターフォール開発（以下WF）であれば、形式知化。 アジャイル開発であれば、フォーカス分割。 これらは排反する概念ではなく、それぞれの利点を活かしてプロジェクト運営を行うことが、より効率的なプロジェクト運営につながると考えられます。 とはいえ、ハイブリ
アジャイルの「ライトウィング」と「レフトウィング」：An Agile Way：オルタナティブ・ブログ
アジャイルの認知が進むにつれて、アジャイルという言葉がどんどん広がっている。アジャイル、という言葉の中にはいろんな要素が入っていることが分かる。もっと大きなものは、CI（継続的インテグレーション）を中核とする技術的なプラクティス群と、スクラムプロセスフレームワークのような、人と人との会話のプロトコルと協働関係を作るしかけだろう。自分の現状を、アジャイルに変えるためには、どうしたらよいだろう？ "最近、「アジャイル」といっても中にいろんな要素があるために、「あなたのアジャイルは何のことを言っていますか？」と聞くことからはじめないと、話がかみ合わない"、と、Agile2012帰りのかわぐちさんと話していて、そのときに、かわぐちさんが描いた絵（たぶんどこかにある４象限の図）がいまひとつ自分にしっくりこなくて、私が描いて見た絵がこの絵だ。 あなたが、現状の開発現場を「アジャイル」に変えたい、と考え
アジャイル開発の本質 〜 アジャイルとウォーターフォールの違いとは | Social Change!
「アジャイル」という言葉が一人歩きしてしまっていて、たまに話をしていても通じないときがあります。 それくらいアジャイルという言葉が広く知られるようになったんだと思う一方で、かえって話が通じなくて、もどかしく感じることもあります。だからといって、そこで「正しいアジャイルとは」みたいな議論をしたい訳でもないのです。 広まれば広まるほど、そういった言葉の認識の齟齬が出るのは仕方ないですね。その正しい定義みたいなところを追求するのもナンセンスなので、そんなつもりはないですが、ただ自分がどう考えているかについては書いておいても良いかな、と考えました。ここは私のブログですしね。 そこで、この記事では、私の考えるアジャイル開発の本質について、そしてウォーターフォールとの違いについて書きました。 アジャイル開発では機能を全部つくらない これまで私の中で、アジャイルと言えば当たり前の前提がありました。それは
Webディレクターがやってはいけない13の行動 | ベイジの社長ブログ
Webディレクターというのは、プロジェクトを推進するうえで欠かすことのできない存在です。しかし、Webのディレクションという行為が曖昧で多岐にわたり、それゆえに職務にグレーゾーンが発生し、その認識の違いでコミュニケーションエラーが発生しているという面もあるのではないでしょうか。 そういったリスクを最小限に抑えるために、うちの会社なりのWebディレクターの定義をはっきりさせようとずっと考えていたのですが、その一環で、Webディレクターがやってはいけない行動、というものをまとめてみました。今日はこれを紹介したいと思います。 1. クライアントの言いなりになる。クライアントの心象を害さないことを最優先に考え、言いなりになってしまってはいけません。クライアントは専門家ではないので、間違ったことを言うこともあります。また、現実的なスケジュールを考えずに要望を安請け合いすれば、プロジェクトが混乱して、
個人目標達成のためのフレームワーク | ベイジの社長ブログ
当社では毎年1月、「目標シート」なるものの作成を各自行ってもらっています。前年度目標の達成率が年棒に大きく作用するということもありますが、それ以上に、個々人が仕事を通して意味のある成長をするために、毎年必ず設定・見直しをしておかなければならないものと考えています。 この目標シートは、私が勤めていたNTTデータの評価システム、知人の会社での人事評価の実態、自己啓発等の参考書籍、そしてもちろん私自身の経験を踏まえ、フォーマット化したものです。決して画期的なものではありませんが、目標の計画立案を大きく手助けしてくれるツールではないかと思いますので、ここで紹介させていただきます。 目標シートのフォーマット 目標設定シートのフォーマットは、以下のような構造になっています。エクセルのシートもこちらからダウンロードいただけます。（中身は適当に入れた記入例です） ご覧いただくと分かると思いますが、次年度の
theclip.jp - theclip リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ：cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
スマホサイトのEFO（フォーム最適化）で爆発的成果を出すための５原則 | LPO研究所
LPO研究所所長の鎌田です。 スマホサイトを用意するのがもはや当たり前になりつつある昨今ですが、スマートフォン対応を急ぐあまり、問合せフォームのユーザビリティがないがしろになってしまっているサイトをよく見かけます。 スマホユーザーの環境は、PCユーザーに比べてあらゆる点でシビアです。いい加減なスマホ対応をしただけでは、そうそうコンバージョンのアップにはつながりません。 下記の事例をご覧ください。 これは、あるブライダル系サービスのPC向け問合せフォームをスマホ最適化したところ、スマートフォンからのコンバージョン率が３倍以上になった事例です。このように、スマホユーザー向けに問合せフォームを最適化するだけでも、コンバージョン率はしっかり上がるのです。 今回は、弊社でスマホ向けフォーム最適化を行う際にいつも心がけている「５つの原則」について、具体例を交えてご紹介します。あなたのスマホ向けフォーム
「シングルページ」流行の7つの理由と最新事例まとめ (1/4)
「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。（編集部） シングルページとは、1ページで完結しているWebページのことです。最近よく見かけるようになりましたね。シングルページのみを集めたギャラリーサイトなどもあり、Web制作に携わっている方であれば一度は目にしたことがあると思います。 シングルページで作られたサイト。左から、モバイルセキュリティソフトウェアのLookout, Inc,（https://www.lookout.com/）、「重陽」ブランドの包丁を製造販売している堺菊守 河村刃物株式会社（http://chouyo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜデザインにおける「引き算」は難しいのか？
レスポンシブWebデザイン ワークフロー
三亚的商电子科技有限公司
Sublime Textを加速するパッケージの紹介
nh-lab.com
祖父江慎さんから【デザイン学生さんへ】ほか