ノンデザイナーがデザインの文句を正しく言うための本4冊+1 - レールを外れてもまだ生きる - コロポンのブログ
自分にとって、使いにくいサービスに出会ったとして。 そのどこが具体的にいけないと思うのか？ どういう修正を加えてほしいのか？ 言葉にできますか？ ただただ使いにくい、わかんない、とクレームを入れるのは、何もしないでそっ閉じするよりはマシ。「使いにくい」というのもユーザの立派な声だから。 でも、よりわかりやすく自分の不満を伝えることができたら、作り手にもっと大きなフィードバックを返してあげられる。みんな幸せになれる文句を言うことができる。 ゲームプランナーなりたてのときに、自分が感じるデザインの違和感を言語化できずに悔しい思いをして、巷でオススメされてたり店頭に並んでるデザインの本を読んではなんとかしようとしました。 結局今もセンスいいデザインが自分でできるわけじゃないけど、言葉にはできるようになったつもり。 その時お世話になった本を紹介してみます。もっとたくさん読んだんだけど、特に自分の中
売れるサイト作成に必須！たった４つのWEBデザインの基本法則
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. インターネットをビジネスに活用することが当たり前になり、競合他社がひしめく現在のWEB市場において、WEBデザインは以前よりも遥かに重要性を増している。 なぜなら、WEBデザインそのものが、コンバージョンを大きく左右する要素の１つとなっているからだ。 しかし、デザイン的に素晴らしいスキルを持っているデザイナーは数多くいるが、デザインとコンバージョンの双方にフォーカスしているデザイナーはまだまだ少ないように思う。 そこで、本日は、私自身の経験から、WEBデザイナーの方にも身につけておいて欲しい、コンバージョンを生むためのWEBデザインの考え方をシェアさせて頂こうと思う。 それでは、早速始めよう。 １．エド・バーネットの「40/40/20」の
Webデザイナーが憧れる余白が美しいWebデザイン2012年版
Ambidex 25th Anniversary... / 株式会社 細尾 / mount inc.他...全55件
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
一目で惚れる。WordPressの厳選レスポンシブ・テンプレート5つ – Handmade Future！
[ads1] WordPressはテンプレートも豊富です。無料で利用できるものもたくさんあります。コストが安く済むのもWordPressのメリットですよね。 ……と、思っていたのですが。 最近、ブログのリニューアル作業を経て、考え方が変わりました。「3,000円とか4,000円払ったら飢え死にしちゃう！」という方でなければ、有料のテンプレートをおすすめします！！ なぜなら、一目で違いがわかるほどにクオリティが高いからです。 今回は、リニューアル作業時にチェックして回った有料テンプレートのうち、ベスト5を紹介します。すべて、そのまんまでスマートフォンやタブレットに対応するレスポンシブです。 Core Minimalist Photography Portfolio スーパーかっこいい。いきなりTOPページ全面がスライドです。マウスでクリックするとくるくる動き、中央写真のクリックで全画面表示に
ウェブデザインの引き出しを増やすPSD素材がダウンロードできる -ByPeople、質も量もものすごいです！
ウェブページのメニュー、ボタンなどをはじめ、ボックス、スライダー、アイコン、背景パターン、リボン、バッジ、エフェクト、テンプレートなど、トータル2,000くらい？のPSD素材がダウンロードできるByPeopleを紹介します。 そんなに数多くダウンロードできないよ、って人も大丈夫！ 全素材まとめてダウンロードできます。 ByPeople ダウンロードできる素材はほとんどがPSDで、モノによってはAIだったりします。 ダウンロードはページ下のメール欄にメールアドレスを入力して、ダウンロードボタンをクリックします。しばらくすると、ダウンロードのURLがメールに送られてきます。 素材の利用にあたっては個人でも商用でも無料、とのことです。 詳しくは、Use Licenseをご覧ください。 数多くありすぎる素材から、いくつか紹介します。 本当に、ごく一部です。
商用利用も無料！素晴らしい完成度の美しすぎるアイコン素材 -Art Professions Icon
アイコン全34種 ダウンロードできる素材のフォーマットはPNGで、サイズは8種類、32x32, 48x48, 64x64, 72x72, 96x96, 128x128, 256x256, 512,512が揃っています。 アイコンのライセンスはCC 3.0で、個人でも商用でも無料で利用できる、とのことです。 詳しくはダウンロードファイルの「readme.txt」をご覧ください。
無料でダウンロードできる洗練されたデザインのUIキットいろいろ
わかりやすく、統一感のあるウェブサイトをデザインする時にあると便利なのがUIキットですが、ウェブ開発・デザインに関する情報やコンテンツを扱うブログBest Open Source Resourcesがそんな美しいデザインのUIキットをリスト化しています。明るいグレーやダークなカラー・木目調など、さまざまなパターンのPSDファイルが無料でダウンロードできるため、頭の中のイメージに合わせてコンテンツを選ぶことが可能です。 A Comprehensive Collection of Free UI Kits & Templates | Web Resources | WebAppers http://www.webappers.com/2012/11/12/a-comprehensive-collection-of-free-ui-kits-templates/ ◆01："Pizza" UI K
商用利用も再配布も限界無しのフリー！全250種類2500個、世界各国の国旗のアイコン素材 - 2500 Flag Icon Set
個人でも商用でも無料で利用でき、バックリンクも不要、コピーも修正も配付もOKな2012年版の世界各国の国旗のアイコン素材を紹介します。 国旗アイコンはこれさえあれば、もう困らないって感じですね。 2500 Flag Icon Set 国旗は全部で250種類あり、デザインはフラット・シャイニーの2種類が揃っています。a 国連加盟国数は2012年現在193ですが、例えばイギリスだとイングランドやユニオンフラッグが揃っています。 国旗は各国、デザイン2種類、サイズ5種類 ダウンロードできる素材のフォーマットはPNGで、サイズは16×16, 24×24, 32×32, 48×48, 64×64の5種類です。 素材は個人でも商用でも無料で利用でき、ライセンスはMIT Licenseでバックリンクは不要、とのことです。 詳しくはダウンロードファイルの「LICENSE.txt」をご覧ください。
ここまで小さくなるの!? PNGをほとんど劣化なく圧縮する｢TinyPNG｣がスゲェ!!
こいつぁスゲェ! PNG画像を非可逆圧縮するブラウザアプリ「TinyPNG」というのを試してみたんですが、とんでもないですねコレ。 画像自体はほぼ変わらんのに、驚異的なサイズダウン。まるで禁断のダイエット法にも見えるんですが、どんな仕組みなんだろ･･･。 TinyPNG – Compress PNG images while preserving transparency 使い方はすごくかんたん。 「TinyPNG」にアクセスしたら、画面の[Drop your .png files here!]というスペースに、圧縮したいPNGファイルをドラッグ&ドロップするだけです。 圧縮のタスクが完了すると、ダウンロードリンクが表示されるので、それをクリックしてローカルに保存すればOK。 画面遷移は一切ありません。 すげーサイズダウンします これは実際にサイズダウンしてみた結果。 左が元画像で右がTi
無料で大量の背景テクスチャをダウンロードできるサイト「Subtle Patterns」
Webページなどの背景テクスチャをいろいろ試したい場合に、約300種類あるテクスチャを選択してダウンロードできるサイトが「Subtle Patterns」です。このテクスチャは商用利用もOKとのこと。テクスチャの確認とダウンロード方法は以下から。 Subtle Patterns | Free textures for your next web project http://subtlepatterns.com/ 約300種類ある背景テクスチャは以下の通りです。番号はサムネイル表示にしたときのページになっています。 ◆01 ◆02 ◆03 ◆04 ◆05 ◆06 ◆07 ◆08 ◆09 ◆10 ◆11 ◆12 ◆ダウンロード方法 公式サイトにアクセスすると、リスト表示でテクスチャが表示されています。 気に入ったテクスチャをダウンロードする場合は…… テクスチャの左下にある「Download
私が数字の出るランディングページを作るために徹底している７つの事
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. あなたは、ランディングページのコンバージョン率を定期的に計測して、改善要素を洗い出し、改善策を実施して、少しでも数字が上がるように努力しているだろうか？ コンバージョン率は１％変わるだけで、売上は何倍も変わってくる。 例えば、もとの成約率が４％だったのが５％に上がるだけで、売上は１２５％増になる。さらに、ランディングページを公開してから、３ヶ月、半年、１年と経つごとに、売上の違いは想像できないぐらいに大きくなっていく。 つまり、ランディングページの定期的な計測と改善は、売上の増加に直結する重要な作業だ。 バズ部では、定期的にランディングページの計測と改善をしており、現在、リスト取得ページは７３.２％、商品の販売ページは１２.１％のコンバー
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
[JS]jQueryのプラグイン33+1選 -2012年8・9月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 BigVideo.js MP4などの動画をウェブページの背景いっぱいに配置します。 Video Background サイズ変更可能
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ
iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません… で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 原文 iPhone 5
商用利用無料、むしろ奨励、ピクセルベースのシンプルなデザインのアイコン素材 -Modern UI Icons
ブログやウェブサイト・アプリでよく使用するものをはじめ、アプリ、チャート、天気、文具、ホビー、顔文字なども揃っているWindows Phoneをテーマに作成したアイコン素材を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
新着記事
ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ