ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横
JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]
代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧
![JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e43158a9b02ff4438d55128491865b833395bd4d/height=288;version=1;width=512/https%3A%2F%2Froundup-inc.co.jp%2Fwp-content%2Fuploads%2F2019%2F09%2F9106fa4d7b0fdf2534aa97dea102e186.png)
JPEG、GIF、PNG画像選択の指針まとめ | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Jennifer Farley氏がSitePointにおいてGIF, PNG, JPG. Which One To Use?のタイトルのもと、Webサイトを作成するにあたってどの画像フォーマットを採用すべきかという指針を簡単にまとめている。まず氏はそれぞれの画像フォーマットの特徴を簡単に説明。 GIF - 256色のインデックス画像。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるという特徴がある JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現
ke-tai.org > Blog Archive > ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」 Tweet 2009/3/12 木曜日 matsui Posted in 記事紹介・リンク | 1 Comment » 本日は、モバイルサイトを作成しているデザイナーにオススメのサイトをご紹介します。 モバイルサイトをキャプチャし、それをジャンル別にまとめて紹介しているサイトがありました。 → モバイルデザイナーのためのアイディアエンジン モバイルデザインアーカイブ [mobiledesignarchive.jp] 着うた、携帯ゲーム、占い、クーポン、など細かくジャンル分けされて、各モバイルサイトのキャプチャ画像が公開されています。 今月オープンしたばかりのサイトのようですが、アーカイブには既に100以上のサイトが収録されているようです。 デザインの参考に使えるのはもちろんのこと、クライアントと打ち合
モバイルサイト構築前に知っておきたいユーザビリティ10のポイント（第1回） | モバイルサイト構築のユーザビリティいろは
端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で本格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト（以降“モバイルサイト”）の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で
ke-tai.org > Blog Archive > デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」 Tweet 2009/1/26 月曜日 matsui Posted in デザイン, 記事紹介・リンク | 5 Comments » はてぶのホットエントリーで見つけました。 デザインに優れたケータイ向けサイトを、キャプチャ画像付きで紹介しているサイトがありました。 これは素敵です。 → case:MobileDesign! モバイルサイトのデザイン [d.hatena.ne.jp] どうやってキャプチャしているのか気になったのですが、コメント欄にその答えがありました。 PCからアクセスできるサイトは、PC上からUserAgentを偽装するなどしてキャプチャする Flashのサイトの場合は、ソフトバンク端末で保存し、メール添付でPCに転送する ケータイからの
FAQには最終更新日を | SIMPLE*SIMPLE
すでに多くのサイトで採用されているインターフェースではありますが、気をつけていないと忘れてしまうかもしれないので念のためにエントリー。 WUFOOではFAQページの下に最終更新日が記載されていますね。ここのページには問題を抱えている人が来るだけに、あまりに古い更新だとうっかり信用を落としかねないです。 ↑ これ、重要かと。 地味な項目ですが、「FAQには最終更新日を！」は大事ですよね。 » Wufoo Docs » Unplugged
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
フォームのユーザビリティを改善する
フォームの重要性 今回はWebサイトの「使い方」からユーザビリティを改善する方法を探っていきます。 多くのWebサイトでは、ユーザーにフォームから何らかの情報を送信してもらうことが非常に大きな目的となります。ブログやSNSに代表される、ユーザー自身がコンテンツを作成するような場合では、フォームの操作がWebサイトの基本操作となります。また、ECサイトではフォームを操作して、購入のアクションを完了してもらうことが最大の目的です。 一方で、フォームはユーザーに対する負担が非常に大きい部分でもあります。純粋な操作量も多くなりますし、ユーザー自身が何らかの情報を送信するということに対する意識的なハードルもあります。 ですから、フォームのユーザビリティを高め、ユーザーの離脱を少しでも防ぐことはWebサイトを制作・運営する上で非常に重要な課題となります。 今回はそんなフォームのユーザビリティを改善する
携帯番号をいれればいいのだな、とすぐわかるインターフェース | SIMPLE*SIMPLE
よく検索キーワードを入れるフォームに虫眼鏡マークがついていたりしますが、携帯番号の場合は次のようなインターフェースがわかりやすいですね。 ↑ これなら迷いません。 いかに迷わずに入力させるか、ちょっとした工夫を凝らしたいところですね。 実際に動作している様子はUmbrella Todayからどうぞ。 » Umbrella Today? 海外のことは知らないのですが、日本の場合はアクセスすると標準で090が表示されているプルダウンにしておいて、そのプルダウンから070、080を選べるようにしておき、その右のエリアに残りの番号を入れさせる方が「携帯の番号を入力するのか」と思ってもらいやすいかもしれないですね。 それと上のスクリーンショットのように、電話番号なのに入力エリアの縦が広いと、何か基本的に複数行にまたがる情報を入れる場所のように見えて個人的にはちょっと不安です。
会員登録フォームを構築するポイント | ランサーズ社長日記
いいね！ 11 ツイート B! はてブ 734 Pocket 58 ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんありますし、見ていたサイトでも登録しやすいサイトには共通点が多くありました。 少し量が多いですが、自分で意識的に行ってきたこと、登録しやすいサイトの共通点、ブログやサイトをみて参考になる点をまとめてみました。 1つ1つはよく言われていることで、大したことありませんが、こういった小さなディティールにこだわって行きたいと思います。ケースバイケースの側面も強いのですが、何かの参考になればと思い
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
恋愛上手とユーザー中心のデザイン: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 しばらく前から、ユーザー中心デザインって結局、恋愛上手になるのと似てるなと思いはじめています。 まず恋愛上手／下手に影響を与えるパラメータってこんな感じで4つに分類できるかな、と。 インプット力：相手に興味を持ち、どれだけ相手を知ることができるかアウトプット力：相手の望みに応えるためのアウトプットをどれだけ提供できるか基本スペック：アウトプット力の範囲外である基本性能（容姿、年齢、収入）経験値・価値観：アウトプット力の範囲外で、かつ基本性能的でないもの（その時点での経験値、趣味や好み、志向性や価値観など） この4項目のうち、基本スペック自体は自由に変えられるものではないですよね。基本スペックを相手が重視する場合であれば、いかなる恋愛上手でもいかんともしがたい場合はあるでしょ
可読性の大切さ、見直してみませんか？ (ユーザビリティ実践メモ)
アメリカのIT関連調査会社フォレスター・リサーチの調査結果(※1)によると、「ウェブサイトの失敗項目で最も多いものは、文字の可読性である」ということが指摘されています。確かに文字の可読性はユーザビリティの基本事項ですが、実際のところ、可読性はユーザ行動にどの程度影響を与えるのでしょうか？実例を交えてご紹介します。 弊社でユーザビリティテスト（ユーザ行動観察調査）を実施したところ、図1のパターンでは、ユーザは1ページ目の画面を一瞥しただけで閲覧をやめてしまいました。コンテンツの冒頭を読んでから判断したのではなく、全く読みもしなかったのです。その理由として、ほとんどのユーザが「なんとなく暗い感じがして、読む気がしないから」と回答しました。 背景色そのものにも原因はあったでしょう。しかし、ユーザに敢えてコンテンツを読んでもらったところ、「内容はとても面白い、商品に魅力を感じた」との回答が得られた
ウェブデザイナーのための16のFirefoxのアドオン | コリス
Mashableのエントリーから、ウェブ制作に役立つ、16のFirefoxのアドオンを紹介します。 Another 16 Firefox Add-ons For Web Designers Font Finder テキストに指定されているスタイルシートを表示します。 Link Evaluator ページのリンクをチェックします。 LiveHTTPHeaders ヘッダ情報を表示します。 OperaView Operaでのレンダリング確認用に。 Pagediff 別々の2ページの差分をチェックします。 Python Sidebar for Mozilla サイドバーにPythonのリファレンスを表示します。 RankQuest SEO関連の各種情報を表示するツールバー。 SEOforFriefox GoogleやYahoo!の検索結果ページに、SEO関連の情報を表示します。 SEOQuake
第2回 なぜ、楽天の商品ページはものすごく縦に長いのか？ | gihyo.jp
みなさんはオンラインショッピングモールの「楽天市場」に出店しているの店舗の商品ページをご覧になったことがありますか？ その中で「何で、楽天のお店の商品ページは、こんなに縦長いんだ？」と思われたことはありますか？ おそらく、楽天市場を利用したことのある方のほとんどは、「ものすごく縦長い商品ページ」を見たことがあるのではないかと思います。 ではなぜ、このように縦長いページが多いのでしょうか。そこにはネットショップで売上を上げるためのポイントが多く含まれていたのです。 ショッピングモールの商品ページが「ものすごく縦長い」理由 前回の記事「ネットショップに訪れるお客様の意識」にて、楽天市場やYahoo!ショッピングなどのオンラインショッピングモールを利用するお客様は「お買い物がしたい」という気持ちが強い、と解説しました。 モールに出店している店舗は、このお客様の高い購入意欲をより一層高め、商品を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
bookma! - 404
gooランキング - あらゆるものをランキングで紹介！ランキングの総合サイト
タブインターフェースを使うための条件 | へたれwebディレクターの覚え書き