これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（後編） | Goodpatch Blog
UIデザインの新しいワークフローを作るために長谷川恭久さんとの共同プロジェクトとしてスタートした“Patch Project”。導入部分として長谷川さんにお話頂いたワークフローの提案について「これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）」として記事にしました。後編となる今回は、デザイナーがするべき雰囲気のデザイン、また具体的なワークフローについての話をまとめていきます。 ルック＆フィールを考える photo credit: Crossett Library Bennington College via photopin cc ではHTMLプロトタイプを作っている間にデザイナーがするべきことは何なのか。それは雰囲気をデザインすること。レイアウト以外のデザイン、色やタイポグラフィ、写真や動画について考えていくのです。 具体的に言うと、スタイルガイドを作るこ
「あ、この人、仕事できるんだろうな」って思う9つの瞬間-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
社会人を長年やってますと、自分なりの「人の判断の仕方」ってものができあがってきます。 「この人は信用できそうだ」とか「あの人とは距離をおいて付き合おう」といった自分なりのアンテナです。大人って、イヤな生き物ですね（笑） でも、みなさんも、こういうアンテナを無意識のうちに働かせているはずです。 大人はとてもすれた生き物でして、ちょっとやそっとでは人を信用しないようになってしまいますが、今日は私なりの「あ、この人、仕事できるんだろうな」って思う9個の瞬間を紹介します。 1.メールのレスが早い メールのレスの速さと仕事能力は、ほぼ比例します。忙しいと遅くなるのではという気がしますが、逆です。むしろ、早いのです。 早い人は、内容も洗練されています。まず結論があり、次に理由、誰が何のアクションをいつやるのかといった5W1Hが2〜3行で書かれているのがよくあるパターン。過剰な装飾、あいまい表現がなく、
「マネタイズはどうやるの？」と尋ねるのはもう止めて - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 最近紹介を始めたアンドリュー・チェンの記事ですが、今回はいよいよ本格的な彼ならではのスタートアップビジネスに関する考察を。スタートアップに常について回るのが「マネタイズ」の問題ですが、彼曰く実はそれはたいした問題ではなくスタートアップが気にする必要はないということで、、、その真意はいかに。 — SEO Japan ビジネスモデルは重要だが、今日、それはコモディティ化されている 最初に言わせてもらうと、もちろん、ビジネスはお金を儲けなければならないのだから、それをもたらすビジネスモデルは重要である。しかし、私が言いたいのはそういうことではない―私が言いたいのは： ビジネスモデルがコモディティ化した
少しの手間で説得力アップ！意外と使える官公庁の統計データ利用法 : LINE Corporation ディレクターブログ
こんにちは、ウェブサービス本部の鳴海です。 突然ですが、あなたが24歳男性だったとすると、同い年の年男は日本全国で何人いるでしょう？ また36歳男性には、同じく年男の同級生は何人いるでしょうか？ 答えは、24歳男性が64万人、36歳男性が87万人。実は、世代間で20万人以上の差があります。また、今年の年男・年女世代の中で、最も人口の少ない12歳女性（57万人）と最も人口の多い48歳男性（89万人）では1.5倍以上の開きがあります。最近、身の回りに小学生の女の子よりも中年男性の方が多いなと思っていましたが、気のせいではなかったようです。 同級生の人口なんて普段意識することはないですが、仕事をする上ではたまに大事だったりします。いま自分が手がけているサービスのターゲットはどの層で、人口で言えばどのくらいの規模なのか、前後の世代に比べてどのような傾向があるのかなどは感覚的に掴めているといいですね
レイアウトが考えやすくなるデザインのルール ｜https://wp.yat-net.com/name
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
Basic Process to Apply CSS to Your Website
2014年8月17日 CSS, Webサイト制作 CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その7 目標：CSSでレイアウトが組める・基本的な装飾ができる 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：CSSの基礎知識がある・基本的なCSSが手打ちで書ける 目次
「いいかんじにしといて」を形にした、NHN Japanディレクターブログリニューアルへの道 : LINE Corporation ディレクターブログ
こんにちは、ディレクターブログ編集部の村上です。 今回は先日行ったNHN Japanディレクターブログ、リニューアルまでの道のりについてご紹介したいと思います。 NHN Japanディレクターブログ（当時はlivedoor ディレクターブログ）の前回リニューアルは約3年前。そろそろデザインも古くなっていたので、今回のリニューアルは9月頃の編集会議ですんなり決定しました。11月にはlivedoor Blogの9周年も控えていたので、そのタイミングでデザインを切り替えようということにになり、ひとまずプロジェクトをスタートさせることになりました。 編集部にヒアリング リニューアルが決まったら、まずはどういったものが欲しいのかヒアリングです。今回の相手はディレクターブログ編集部。当然編集部メンバーはブログ大好き人間ばかりです。その編集部メンバーが納得するデザインを作るとなれば、なかなか大変な仕事に
要件定義の前に課題定義が必要、という話
ヤスヒサ 🗑 @yhassy デザインが最後のほうでひっくり返る理由の一つは、決定権を持つ人とデザインによって解決しようとしている課題について話し合っていないから。それ抜きにしてクリエイティブ見せてもひっくり返るのは必然なのかもね。 2011-06-25 15:57:52
アイデアとコンセプト: コンサル社長のたまーに独り言
地場のいろんな企業の経営者と会うことが多く、その時には結構ビジネスアイデアや新しいサービスなどの話題になることが多くあります。 そして、その中でよくつかわれる言葉が「アイデア」と「コンセプト」。 これら微妙に似通った言葉で、よく混在して使われていますが、辞書で調べると、 アイデア － 発想、観念、理念 コンセプト － 概念 確かに似てます。 ですが、これは言葉としての意味であって、実はビジネスにおいてははっきりとした違いがあります。 アイデアは、 「企業側視点で商品を表現したもの」 であり、コンセプトは、 「アイデアに消費者視点を足してブラッシュアップしたもの」 ということになります。 要するに、アイデアというのはあくまでも企業の利益追求でしかなく、コンセプトにして初めて消費者が関心を持つということです。 大企業と中小企業の差はここにあるかもしれません。 中小企業の経営者の多くは、「うちの
ワンパターンなウェブデザインから抜け出すための10のヒント
10 Great Tips to Boost Creativity [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブサイトをデザインするとき、ワンパターンに陥ってしまうことは簡単です。デザイナーは自分が何が得意であるか知っており、それを強みにして常用してしまう傾向があります。しかしながら、通常とは異なる視点をとることで、創造的なアプローチを新しい限界へとおし上げることができます。 創造力をアップさせることはウェブデザインの現在のトレンドを学び、何がそれを成功させたかを理解し、そしてあなた自身のユニークなスタイルを使ってそれらのテクニックを実行することから始めます。 あなたの創造力をあふれ出るようにするために、ここに考慮に入れるべき10のヒントがあります。 1. カラーを考えてみる サイトをゼロから作成する時や修正する時、コンセプトを強くするためにカラーの知識を深め
配置をマスターして「機能するレイアウト」を作る大切なポイント
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳 v0.1 documentation
この和訳について¶ この文章は Google JavaScript Style Guide を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく CC-By 3.0 とします. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. この和訳のリポジトリは こちら です.
RedLine Magazine : CSS セレクタ総復習 （2010年5月版）
CSS セレクタ総復習 （2010年5月版） CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
もう配色には困らない！「Adobe Kuler」
写真から配色パターンを自動作成！ マイテーマを作ろう 「他人が作った配色」だけでも相当遊べるKulerだが、そのうち本来の目的である「配色パターンの作成」を試して、ぜひ“マイテーマ”を作ってみたいもの。とはいえ、何もないところから色の組み合わせを考えるのは、やっぱりちょっと面倒くさい……。そんなものぐさな人にも便利な方法がある。 1つは、すでにある（誰かが作った）テーマをもとにカスタマイズする方法。先ほど紹介したとおり、各テーマの詳細画面にあるアイコンをクリックするだけで、配色パターンの編集画面に移動できる。編集画面ではPhotoshopでもおなじみのカラーホイールを使って簡単に色を選択できるので、気に入らない色だけをちょっと変えてみてもいい。また、設定した「ベースカラー」を基準として、Kulerにある程度お任せでテーマを作ってもらうのも可能だ。 もう1つ、画像をもとに自動的に配色パターン
iOS 17 - Apple Developer
ウィジェットとライブアクティビティ ウィジェットがさらに多くの場所で活用できるようになり、パワーアップしました。WidgetKitを使ってインタラクティブな要素やアニメーションによるトランジションに対応すると、ユーザーがウィジェットから直接アクションを実行できます。既存のウィジェットにわずかな変更を加え、iOS 17向けに再ビルドするだけで、iPhoneのスタンバイ画面、iPadのロック画面、Macのデスクトップ上で視覚的に美しく表示させることができます。SwiftUIを使用すると、ウィジェットの色と間隔がコンテキストに合わせて自動調整されるため、複数のプラットフォームで使いやすさが増します。 WidgetKitとActivityKitで構築したライブアクティビティがiPadで利用できるようになり、ユーザーはアプリのアクティビティや情報をロック画面からいつでもリアルタイムで確認できます。
総務省｜報道資料｜モバイルコンテンツの産業構造実態に関する調査結果
総務省は、近年の携帯電話の広範な普及、端末の高速・高機能化、通信料金体系の変化等を背景に、急速に拡大するモバイルビジネス市場の動向に関する調査を2003年から行っています。 このたび、2009年の調査結果を取りまとめましたので、公表します。 ・2009年のモバイルビジネス市場は15,206億円。前年比1,682億円（12％）増加。 ・うち、モバイ ルコンテンツ市場は5,525億円で前年比690億円（14％）増加。 モバイルコ マース市場は9,681億円で前年比992億円（前年比11%）増加となった。 ・携帯インターネット利用人口が伸びる中（8,010万人。前年比6.7％増。総務省「平成21年通信利用動向調査」）、市場は順調に拡大。特にコマース市場の伸びが顕著。
ユーザーという言葉に潜む５つの側面
U > X 抽象的なアイデアを話しているかのようにみえる「UX」ですが、意味をあやふやになってしまうのは実は「Experience (体験)」のほうではなく「User (ユーザー)」という部分にあるのではと感じています。「Webサイト」とひとことで表すものの、Webアプリケーション、Ｅコマース、コミュニティサイト、個人サイトと様々な種類があり、それぞれ人との関わり方が違います。Webでの操作は能動的なものが多く「User / 利用者」と表現しやすいですが、すべてが能動的な Web サイトではありませんし、能動的な行動にも幾つか違いがあります。 使うといっても、Webアプリケーションを操作する方と、Ｅコマースを訪れる方は見所が違いますし、自分がした体験の評価の仕方も異なります。つまり、UX について語るとしてもどのような人たちに何を提供したいのかという前提を共有していないと、「よい体験を」な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなダイアリーで「これが実現できると嬉しい！…