ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方をSmashing Magazineから紹介します。 5 Simple Tricks To Bring Light and Shadow Into Your Designs 以下、その意訳です。 ライトとシャドウというのは単にそこにあるだけではありません。ライトは対象物を射し、シャドウを生み出します。 形や大きさ、質感を伝え、目にする対象物の理解を深めます。 ウェブデザインでもこのライトとシャドウは非常に重要で、デザインをよりナチュラルにし、感動的で直感的なものにします。 ここに、ライトとシャドウの洗練された5つの使い方を紹介します。 A Quick Anatomy Of Light And Shadow ライトとシャドウの構造 下の図は、ライトが左からあたっています。ハイライトはそのライトが一番強くあたっている箇所です。そして
モバイルサイトのチェックが効率よくできるツール : LINE Corporation ディレクターブログ
こんにちは、『プチペット』を担当している吉沢です。 最近のモバイルサイトはキャリア間や機種に依存する問題が少なくなり、表現の制約も少なくなってグラフィカルに魅せることできるようになってきましたね。 グラフィカルに魅せることができるようになった分、HTMLソースも複雑になり、デザイナーやマックアッパーにコーディングを依頼する機会が増えてきていると思います。 状況は会社によって様々だと思いますが、今回は、効率よくデバックを行って完成度を高めたい、ちょっとした作業はディレクター側で行いたいというときに、PCサイトの作成でもおなじみのツールを含めた、モバイルならではのツールの使い方をご紹介したいと思います。 【１】FireMobileSimulator PCでモバイルの画面を表示することができるので、電波状況や通信速度を気にしなくてもよく、レイアウトのチェックから、機能面のデバックをスピーディに行
C-teamで作るバナー広告の効果がスゴすぎてひいた話 : けんすう日記
今、C-teamというサイトの開発に関わっているのですが、あまりに効果が高くてスゴイので、結構ショックだったので紹介します。 C-team 今までWebディレクターとして、バナー制作をしたり、自分のサイトのバナーを制作会社に頼んでいたりしたんですが、これがいかに非効率だったかということを思い知って反省したので、紹介してみます。 自分の関わっているサービスをスゴイスゴイ言うと宣伝くさくなるので避けてたんですが、これは本当にびっくりしたのです。通常のバナーの作り方 通常のバナー広告って以下みたいな手順をふむことが多いですね。 1. 宣伝したいサイトの運営者(ディレクター)が欲しいイメージを制作会社に伝える 2. 制作会社のデザイナーさんがいくつか作る 3. そのバナーでよさそうなものを運営者が選んでそのバナーを出す ここでの問題は、1も2も3も「こういうのがいいんじゃないか」って勝手に想像して
就活生が本当に見ているもの--失敗しない「新卒サイト」の作り方とは？
4月になり、街を歩くとフレッシュな新入社員の姿を見かけるようになりました。また、早い企業では翌々年度の採用活動について考える時期でもあります。 さて今回は、新卒者向けの就職情報サイト（新卒サイト）を検証しました。被験者は、就職活動中の大学生5名（男女混合）です。学生たちが普段使っている「リクナビ」「マイナビ」サイト内で、どの要素が見られ、どの要素が見られないのかを、アイトラッキングツールを使って分析します。なお学生たちには調査の目的は明かされておらず、あくまで普段通りの情報収集をしてもらいました。 今回の調査にて、被験者たちに共通するある傾向が見えてきました。次年度の新卒サイトを作る際にご参考いただければと思います。 新卒学生に「刺さる」写真 他サイト同様、今回の調査においても、学生たちは画像に注目していました。以前、本コラムの中で「転職求人サイトにはどんな画像が適しているのか」という調査
「Yahoo!アクセス解析」の気になる機能 -経路分析編- | かいせきのかいせき。
前回に引き続き「Yahoo!アクセス解析」の機能を紹介をしていきます。 今回は「経路分析」という機能です。 「Google Analytics」では物足りないページの遷移を知ることが出来る機能ですので注目されてる方も多いと思います。 経路分析でページ遷移を確認 では早速、レポートページ>ナビゲーション>経路分析>URL別 とクリックすると。。 この画面が出てきます。 閲覧開始ページからの訪問経路を表示 （訪問数単位/上位5経路） すべてのトラフィックの訪問経路を表示 （ページビュー単位/上位5経路） と２つの表示を選択できます。 ここでは「すべてのトラフィックの訪問経路を表示」を選択。 すべてのエントリーされたページビュー数から上位５ページの経路を追えます。 （1番閲覧の多いページから上にページビュー数とパーセンテージと共にURL表示されます。） さらにその右にある⇒をクリックすると
国内19社のペルソナ利用事例にみる特徴と改善点 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 このコラムを読んでくれているみなさんは、「ペルソナ」という言葉をすでに何度も聞いたことがあるでしょう。新聞記事などで他社のペルソナ事例などをご覧になった人はたくさんいるでしょうし、ウェブデザインのプロジェクトのために実際にペルソナを作ってみようと決めた人もいるでしょう。 しかし、数年前だったら、日本ではペルソナを知らない人が多かったでしょう。確かに、この2～3年の間に、日本市場で多くの企業がペル
「Yahoo!アクセス解析」の気になる機能 | かいせきのかいせき。
遅ればせながら、ちまたで噂の「Yahoo!アクセス解析」をプライベートで実装してみました。 日本での検索エンジンの雄 Yahoo! が提供しているという事で無視出来ませんが、 仕事上では9割近く「Google Analytics」を使用しているので、 比較の意味を込めて「Google Analytics」にない機能をメインに報告します。 いきなり手を抜きますが、申し込み方法等はすばらしいインプレッションを書かれてる 「RealWebAnalytics(リアルアクセス解析)」を参照してください。（いつも勉強させていただいてます。） ではでは、いきなりレポートページからですが、 訪問詳細で個別セッション情報を閲覧 まずは１点トラフィックメニューに「訪問詳細」という項目があります。 これはセッション単位で以下の項目を情報として 訪問日時 IPアドレス 国 訪問回数 閲覧開始ページ 訪問経路
「プロらしさ」を生むWeb文章校正の５大鉄則：NBonline(日経ビジネス オンライン)
校正というと、誤字・脱字をチェックしたり、「てにをは」の修正をしたりといった作業を思い浮かべる人も多いのですが、これは間違いです。もちろん、こうした行為も校正の一つではありますが、もっと大切なことがいくつもあります。 原稿というのは、不思議なもので、書き上げたばかりのものよりも、寝かせて見直して、手直しを入れたもののほうが、はるかに出来がよくなります。「勢いで書き上げる第一稿、落ち着いて見直す第二稿」とか「ラブレターと原稿は一晩寝かせてから提出する」という言葉が、物書きの間では、よく出てきます。 もし、あなたが勢いで書き上げた第一稿を見直さず、クライアントに提出したり、Webサイト上に掲載したりしたらどうなるでしょうか？ ほとんどの場合、誤字・脱字があったり、読みづらい文章があったり、間違いがあったりするでしょう。 原稿の品質向上のためには、見直す時間も考慮して、スケジュールを組み立てるこ
iPhone対応サイトの作り方 - iPhone 3G Wiki*
DiffAnaとは？ iPhoneを買う前にiPhoneの魅力 iPhone安いって聞いたけど 初期設定はじめにやること MMSの設定 Eメール(i)設定 地域日時設定 iPod設定 MySoftbank登録 留守番電話関係 掲示板掲示板 アプリ一覧 Wiki編集局 FAQiPhoneのメールについて FAQiPhoneのパスワード FAQ操作編 FAQ初期編 →カメラ関係 →App Store（アプリ） →バッテリー・充電関係 →無線LAN・Wi-Fi関係 →USIM・キャリア関係 FAQメール編 FAQパケット料金編 FAQ重い メール着信関係 未解決問題 故障・修理 ホーム画面/アプリホーム画面 電話 写真 ビデオ・カメラ マップ（GPS） Safari(ブラウザ) Youtube iPod 時計 カレンダー ボイスレコーダー iBooks アプリ（AppStore） TIPS基本(
商用利用可のくるっとしたスワールのフリーのベクター素材 | コリス
Smashing Magazineから、デザインのワンポイントにも最適なくるっとしたスワールのフリーのベクター素材を紹介します。
サイトを美しく魅せるゴージャスナビゲーション集:phpspot開発日誌
50 Gorgeous Navigation Menus | Vandelay Website Design サイトを美しく魅せるゴージャスナビゲーション集。 重厚で美しいデザインのナビゲーションの特集です。 Housing Works Nuttersmark Paiko Good Soh Tanaka 参考にしてエレガントなメニュー作りに役立てましょう。 関連エントリ ナビゲーション実装に使える、Ajaxライブラリ/サンプル集 階層ナビゲーション実装ライブラリ集 クールなナビゲーションメニューを作成するCSS＆HTMLサンプル CSSベースの超クールなナビゲーション集 CSSでdigg風のナビゲーションを実装サンプル
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
MOONGIFT: » 必見！怖くなるくらい優秀なCMS「concrete5」:オープンソースを毎日紹介
これまで多数のCMSを見てきたが、ここまで完成度が高いと言えるものに出会ったことはなかった…そう言えるくらい凄い。このどきどき感はDekiWikiに触れた時に感じたものに近い。 見たまま編集できるCMS CMSと言えば、ユーザ画面と管理画面に分かれていて、管理画面はモジュールやテーマの設定、各項目の並びを指定するのが通常だ。実際の出力結果はシステム任せで、その点が柔軟性に欠ける点でもあった。 しかしこれは違う。見たまま編集でき、さらに高い柔軟性を維持している。 今回紹介するオープンソース・ソフトウェアはconcrete5、デザイン、管理、コンテンツ作成全てが高度なCMSだ。 相当個人的な感情が入ってしまっているのは、同じようなシステムを構築する予定があったからだ。だがconcrete5は完成度も高く、多少の改造さえ施せば十分な気がする。やはり下手に開発コストをかけるよりもオープンソースで探
携帯端末以外のIPを制限する.htaccessを簡単生成！『Mobile IP htaccess Maker』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
飲食店のモバイルデザイン｜モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト
HTML、CSS、JavaScriptの練習に最適な便利ツール『rendur』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
WEB版のRSSリーダーのソースコード(フリーのPHP・CGIなど)を出来るだけ多く紹介してください。…
Home
IDEA * IDEA
はじめてのjQuery