Googleのマテリアルデザインで使える色が並び、クリック一発でカラーコードのコピーも可能な「Material UI Colors」
Googleが提供しているモバイルOS「Android」の最新バージョン「Android - 5.0 Lollipop」にも採用されている、新しいUX体系が「マテリアルデザイン」です。マテリアルデザインの発表後、Googleは自社サービスに続々とマテリアルデザインを採用しており、サードパーティ製のアプリなどでもこれを採用したものが次々と登場しています。そんなマテリアルデザインでは使用可能な色が指定されているのですが、これで使えるカラーを並べたカラーパレットを表示してくれ、使用したいカラーをクリックすればそのカラーコードが一発でコピーできてしまうというウェブサイトが「Material UI Colors」です。 Material UI | Material Design | Material UI Colors http://www.materialui.co/ 「Material UI C
デザイン変更するときキャプチャ撮りまくると捗る - ✘╹◡╹✘
これまではどちらかと言うとDBやWeb APIみたいな開発作業が多かったけど、最近はHTML/CSSを触るようないわゆるWebデザイン的な作業をする機運が高まってきた。あんまりちゃんとやったことが無いために年始から色々と考えてて、まあその結実としてキャプチャ撮ると捗るという体験があったので書き残しておく。ちなみにキャプチャは無い。あとでデザイン変えたやつ公開したら過程を整理して紹介できると良いと思う。 過程を残すと意見をもらいやすい 『藤村龍至 プロトタイピング-模型とつぶやき』という本の中に、プロトタイプとして建築模型をつくっていく過程の話がある。与えられた条件を元にまず最もシンプルな状態から始め、課題を見つけながら少しずつ改善を加えていく様子が実例とともに紹介されている。この作業を反復しながら適用していくことで、模型の状態を都度更新していく。この方法には、設計者以外の人でも設計過程を見
意外！女子の理想の葬儀は散骨だった!?
額に蛾がとまってますよ。 そう、博士くらいになると額に蛾がとまることもままあるんじゃ。 すごい！ さすがさんこつ博士…。 どうやったらうまく散骨できるか、知りたいかね？ はい！ 私、自分の骨を自分で散骨するのが夢なんです！ それは無理なんじゃないかのう。そもそも散骨とは、火葬後の遺骨を粉末状にし環境に配慮したうえで合法的に海や山などの自然に還す葬送の形式を言うんじゃ。 一瞬、すごく怖い顔しませんでした？ ド素人の、えーと君…。 エリコです。 ド素人のエリコちゃんが散骨をうまくやるには、実はカンタン…。「博士の散骨5,000箇条」を守れば、それでいいんじゃ。 は、博士の散骨5,000箇条!? なに、構えることはないぞい。どれも初歩的でカンタンなことばかりじゃ。 教えて教えて！ ざっと紹介すると…。 散骨5,000箇条その1
PSD カンプから Web 開発に必要な情報をさくさく抽出 | Adobe Blog
多くの Web デザイナーがページのデザインカンプを Photoshop を使って制作しています。デザインが固まるとカンプは開発者に渡りコードを書く作業が始まります。カンプからコードへ、この作業を強力にサポートし飛躍的に生産性を向上させる夢のツールが Extract という名称で Creative Cloud サービスに組み込まれました。これは以前ご紹介した実験的プロジェクト Project Parfait (プロジェクトパフェ) がプレビュー版として Creaitve Cloud Files に組み込まれたものです。 使うのはカンタン、クラウドストレージに PSD を置くだけ Extract を使うのはとてもカンタン、特に Creative Cloud のストレージサービス Files をご利用中の方は何の準備も要りません〜ただ PSD ファイルをストレージに置くだけです! あとはブラウ
繰り返しが印象深い！「ワンパターン・デザイン」７選
Webサイトギャラリーを覗いて感じたのですが、やはり美しい写真やムービー、斬新なレイアウトなどのデザイン要素がふんだんに使われているサイトに目が奪われがちだったりします。 その中で、あえて一つの要素にフォーカスし、うまく繰り返して魅せる手法があることに気づきました。 今回はこれを「ワンパターン・デザイン」と称し、その手法を取り入れたサイトを紹介します。 http://naotaro.com/ 森山直太朗 オフィシャルWebサイト シンガーソングライター、森山直太朗氏のオフシャルサイトです。 TOPに配置されている森山さんの画像が背景に指定されており、スクロールしても追従してきます。 写真は変えず、顔の落書きだけを差し替えることで、着せ替え人形のような効果を生み出しています。 本人は至って真面目なのにとてもPOPな雰囲気を生み出しており、お茶目な森山さんの人柄が垣間見えるようです。 メインの
UIデザインで使いたいアプリケーション(止まっている状態のUI制作関連編) #2014.09版 - たぶん、ねむたくなる
UIデザイナー向けのアプリケーションやツール、プラグインについて 定番含め網羅的にまとまってる記事って見たことないなーと思ったので とりあえず作ってみました。(すごく長くなってしまったので記事分けしました) 僕がMacユーザーということもあり、8,9割はMac寄りの選定になっています。 その辺はご了承の上ご覧くださいませ mm (参考までに現在私が使っているものには“※”をつけました) ということで、第1弾 “止まっている状態のUI制作関連” です。 UI制作系アプリケーション Adobe Photoshop ※ デザイナー定番のビットマップ画像編集アプリケーション。 デファクトスタンダード的存在でプラグインなども多い。 慣れの問題含めこれ以外を使う理由が無いためだいたいこれ。 Windows : 可 Adobe Illustrator ※ デザイナー定番のベクター画像編集アプリケーション
大幅リニューアルを敢行した『カメリオ』が、元スターバックスの店員にUIデザイン刷新を託した理由 - エンジニアtype
同時に従来のiOS版に加えてAndroid版・Web版が登場。マルチプラットフォーム化も実現した。 『カメリオ』が他のニュースアプリと一線を画していたのは、ユーザー個々人が気になるテーマやカテゴリーからこだわり情報を選び、「フォロー」するだけで、ネット上にある関連情報を自動で「深追い」できる点。同社CEOのシバタアキラ氏は、リリースから約6か月が経過しての今回のリニューアルで大きく変わったのは 【1】こだわり情報を探さなくても見つけられるメディアへの進化 【2】UIデザインの変更 だという。 【1】については、既存ユーザーの『カメリオ』の使い方を検証していった結果、より利用しやすく、きめ細かな情報にアクセスできるようにする必要性を強く感じたからだとシバタ氏は語る。 「ユーザーが検索や登録に使うキーワードを検証してみると、単純に『サッカー』とか『相撲』といった抽象的で漠然としたものが多かった
ノンデザイナーがそれっぽいWebデザインを作る話 - CAMPHOR- Blog
この記事は CAMPHOR- Advent Calendar 2014 の10日目の記事です。 こんにちは、みかさ（@To_Mikasa）です。 今日はデザイン初心者である僕が、Photoshopを使ってWebサイトのデザインをしていく上で、「それっぽく」していくためにやったことをざっくり書きたいと思います。ざっくりです。 はじめに デザインの知識を付けたり、流行をキャッチアップするために、コリスやPhotoshop Vipは 普段から見ています。とても参考になる記事ばかりです。 参考にするサイトを探す ノンデザイナーにとって０からデザインを考えるのはツラかったので、 デザインの参考にするためにイケてるサイトを３個選びました。 自分が作りたいイメージに似たものを選ぶといいかもしれません。 １つだけを参考にするとあれなので、それぞれのいい所や好きな所をそれっぽく組み合わせました。 ワイヤーフ
Webコンテンツの成果が上がるレイアウトの法則とは？ | 誰も語らなかったWebコンテンツ作成技法
優れたコンテンツ構成の鉄則を探る！優れたコンテンツとは顧客の悩みを解決できるため、検索やお気に入りから訪問者を獲得できます。そして、そのコンテンツは別のページに誘導する力があり、しかもゴールに結びつける力があります。 前回説明したように、こうしたコンテンツは、天才的なアイデアや人並みはずれた文章力で作られるのでしょうか。実際にはそうではありません。普通のビジネスパーソンが、普通に考え、普通の文章力で作ったものが成果を上げているのです。 意図的ではない分、成果が小さいことがもったいないのですが、これを意図的に行っていけば、狙った成果をより大きなものにできるはずです。それでは、コンテンツの成果が上がる構成とはどんなものなのか解説していきます。 コンテンツの見出しは画像を使わず2行のテキストで作る前回説明したように優れたコンテンツは、検索集客力が高く検索から顧客と出会う力を持っています。検索から
サイトマップやレイアウト構築に便利なUIキット「Website Flowcharts」
webサイトの制作をスタートする前には、レイアウトの構築やサイトマップの作成が必須。それをすることで、サイトの全体像を把握しながら計画的にデザインをすることができます。今回はそんな企画時に是非利用したい便利なUIキット「Website Flowcharts」を紹介したいと思います。 いろいろなレイアウトのフォーマットUIイメージが72種揃っており、組み合わせをすることでサイトイメージをふくらませることができます。 詳しくは以下 カラムレイアウトやグリッドレイアウト、ランディングページやブログ、カレンダーやユーザープロファイル、コメント欄、タブ、404エラーなど、サイトを制作する上で想定されるレイアウトUIがラインナップされており、わざわざ1つ1つ書き起こす必要がありません。時間短縮にもなりますし、企画書のクオリティも高められるのではないでしょうか？ いろんなシーンで活躍してくれると思います
修正依頼をよりスムーズに！ウェブ制作におけるバグ報告を超効率化するUSERSNAPが便利！ | バンクーバーのうぇぶ屋
WEB制作において、クライアントに確認の依頼をして、修正依頼って夜中に来たり、納期ギリギリに来たりすると困りますよね。それで愚痴る人も少なくないと思います。でも、よく考えたらなんでそんなに時間がかかっているんでしょう？ もしかしたら、クライアントが修正依頼を報告するまでの課程に問題があるのかもしれません。よくいるクライアントは、修正依頼を書くまでの課程が… 修正確認ページをぷりんとあうとー → 手書きで修正 → スキャン → 送信 → また修正見つけたけどさっきスキャンした紙どこやったっけ？ → またプリントアウト → 手書き修正 → スキャン → あれ一枚目の修正どんな内容だったっけ？ → 以下無限ループ ・・・・無駄しか無いわ！！！無駄以外探すのが難しいわ！！ まぁ、でもこれはクライアント側も可哀想。WEB屋ならまだしも、WEBサイトの修正依頼にどれだけの時間を使わせるつもりかと…そり
Webデザインの慣習を破ることは、ユーザーエクスペリエンスを破壊すること
Bucknell Universityのサイトの、型破りなレスポンシブデザインへの変更は話題を呼んだが、それによってユーザビリティがかなり犠牲になっていることが、学生と保護者によるテストで明らかになった。 Breaking Web Design Conventions = Breaking the User Experience by Katie Sherwin on July 20, 2014 日本語版2014年10月6日公開 大学のWebサイトのトップページを頭に思い浮かべてほしいと言われたら、どのようなイメージが浮かぶだろうか。浮かぶのはSUNY Cortlandのトップページのようなもの、つまり、芝生の上に学生がいる画像があって、ページの上部にはナビゲーションがあり、そこにAcademics（：学部・大学院）、Admissions（：入学案内）、Prospective Studen
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの？
新作スライド ボッチなデザイナーがクラウドファンディングを始めようとしたら「それでは3200人あつめてください」と言われた件 - https://goo.gl/co5NRN 公開しました！ ぜひコチラもお読みください！ 読んでくれてありがとう！面白かったらぜひぜひシェアしてくれると嬉しいよ！(`･ω･´)b ダウンロードもプリントも配布もご自由にどうぞ！たくさんの人にみてもらえれば最高です！ デザインが苦手な人ほどオススメ！ Aさんはデザインはこうだという。 Bさんはデザインはああだという。 ああああああもう！！結局どっちが正しいんだよ！？ そんな疑問がたった13ページで解決します！ "デザイン"なのに真逆のことをいう人達がいるのは、 実はこういうことだった！ もう、デザインが苦手なんてことない！Read less
秘かに流行っているらしいポリゴンデザインが簡単に作れる無料アプリが本当に簡単すぎた！
これだけです。 はじめに自動で加工をしてくれます。ですが、ちょっと荒いためはじめの点を全て削除します。それから加工したい物の輪郭に沿って点を打っていけば、いい感じにポリゴン化されます。 各ツールについても、簡単に説明をします。 上から順に説明していきます。 About DMesh = DMeshのオフィシャルサイトへのリンク Check Pro Version = 有料版のアプリダウンロードサイトへのリンク Load Image = 加工したい画像を選択 Save As…(s) = 保存 Save Format = 保存形式（Bitmap、Vector、OBJ） BG Color = 背景の色を調節する Mesh Opacity (1~0) = 加工した画像の透明度調整 Point Color = 点の色を調整する Reset Setting = 設定した内容をデフォルトへリセット Get
ソニー損保のWebマスターが部内で作った“行動指針「わかりやすさのその先へ」十か条”がスゴイ！ | 稲富滋のWebマスター探訪記
いくらWebサイトの良しあしを外部からほめられたとしても、お客様にとってわかりにくければ何の意味もない。 文章がいくら正しく書かれていても、お客様に伝わらなければ意味がない。 そう話すのは、ソニーが15年前に損害保険業界に参入し設立した「ソニー損保」のコンテンツ企画部長の片岡 伸浩氏。ダイレクト販売を旗印に保険業界に参入する企業として「企業のためでなく、お客様のための保険会社」だというメッセージを伝える必要がありました。そこで、今回はそのメッセージを伝えるために、ウェブを通じてどのような取り組みを行っているか片岡さんに伺いました。 コンテンツ企画部で作った行動指針「わかりやすさのその先へ」保険という商品はもともと複雑な商品で、お客様がすべてを理解したうえで契約しようとすると、かなり広範囲な知識が必要となります。お客様にとっては、「難しい」と思われてしまう商品かもしれません。言い方を変えれば
一緒に働く仲間も意のままに操れる！？明日からWeb制作の現場で使える行動心理学 ｜ブログ｜東京のWeb制作会社・ホームページ制作｜QUOITWORKS Inc.（株式会社クオートワークス）
サイト作りの根本って、「ユーザーに意図した行動をとって欲しい！」「ユーザーに意図した感情を抱いて欲しい！」って事だと思うのですね。じゃあ行動心理じゃないかと思いまして。今回は行動心理学をweb制作に取り入れる方法をまとめました。調べ始めるとむちゃくちゃたくさんあるので代表的なものを今回は紹介します。 目次 アンカリング効果 カクテルパーティー効果 バンドワゴン効果 ハロー効果 アンカリング効果 アンカリング効果とは、最初に提示された特定の数値や情報が印象に残り、それが基準点(アンカー)となり判断に影響を及ぼす心理傾向です。 100万円▶︎90万円となっているときに安くなっている（本当の相場の価格より高くても、その場では相場より安く感じる）感じたり、交渉の場で最初にふっかけ、そこから徐々に条件を優しくされると難しい条件でも「最初と比べれば」という思考が働いて悪くない条件だと感じてしまいません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス
新着記事
