こんにちは。子煩悩ライターのイワタテです。 娘、と書くより、愛娘、と書いた方がしっくり来るんです。 きっと、愛しているからでしょうね。 ところで、ライターという職種に限らず、仕事で文章を書くすべてのみなさん。 原稿、自信をもって出していますか？ 僕は、自信をもって出しています。 その秘密は、原稿提出直前に必ず使う、15項目のセルフチェックシートです。 このチェックシートを活用するようになってからというもの、クライアントの機嫌は良くなるし、読者からのレスポンスが見違えたし、みるみる仕事が増えていくし……父ちゃんやったぜ愛娘！ 原稿送信のボタンを押すときはいつも不安になるという方。 よろしければこのチェックシート、印刷して机のどこかに貼って、使ってみてください。 □ 原稿の結論がタイトルに明記されているか。 何が書いてある原稿か直感的に理解できなければ、そもそも読者はページを開かない。 □ 想

These earth tone color palettes are perfect for a wide variety of nature-inspired designs. Use the provided hex codes to save time choosing colors.

ここ数年でのテクノロジーの進化とデバイスの多極化により、WebサイトなどのUXデザインを行う際に気をつけなければならないポイントが非常に多くなった。 特にユーザビリティーが結果に大きな影響を与えるサービスにおいては、どのような内容のプロダクトであっても高いユーザーエクスペリエンスを達成する為に普遍的にクリアしなければならないポイントが幾つか存在する。 品質管理とコンバージョンアップの実現を目標に、10の項目ごとのチェックポイントのチェックリストを作成してみた。 サービス公開前に必ず確認し、全項目のクリアを目指したい。 1. ユーザーエクスペリエンス関連ユーザー登録する際にユーザーになにかしらの価値を提供 例えば登録ボタンは単純に “登録” ではなく、”無料トライアル申し込み” とした方がユーザーにとってのメリットが伝わりやすい。また、極力無駄な登録はさせない。 料金/費用を分かりやすく表示

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook

『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

26 Comments screen size needs ! awesome collecttion! thanks for share! Thanks. 🙂 nice Gisele…really good examples here, thanks Gisele, you bring in very useful information every now and then. I really appreciate your hard work that you put in each of your articles. As far as responsive web designs are concerned, Yes! it’s the hottest topic being discussed every where. This article would be VERY h

ニュースサイトやイメージギャラリー、ブログなどの情報量やコンテンツが多いWebサイトをデザインするのは大変ではないでしょうか。日々、情報の更新があるようなWebサイトはコンテンツを整理し、かつ見やすいようにレイアウトしなければなりません。そこで今回は「25 Beautiful Content Heavy Websites」で紹介されていた中から “膨大なコンテンツを美しく、さらにレスポンシブで見せているWebサイト” をいくつかピックアップしてまとめてみました！ House http://house.pl/ 大きなメインビジュアルがまず目に入るサイト。縦長長方形のブログ記事と赤い横長の長方形のプロモーション記事で構成されています。 Monocle http://monocle.com/ 写真や各記事のエリアの大きさが異なるWebサイトですがとても整った印象があります。 Esquire ht

レスポンシブWebデザイン（RWD）で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要？」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び気になったので自分の考えをまとめてみました。 モバイル版ブラウザの「デスクトップ表示」機能 たとえばDolphinやChromeといったモバイル向けブラウザにはデスクトップ版を表示するための機能が用意されています（FirefoxやMobile Operaにもついてるそうです）。わざわざこういうった機能が装備されているということは、これがユーザに求められる機能だからだと思います。（以下はiPhone

昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし

いまさら聞けないCSS3入門＆スマホ対応6つの問題点：スマホ向けサイト制作で泣かないための秘伝ノウハウ（4）（1/2 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、CSS3になるまでの歴史、代表的な3つのCSS3モジュール、実装上の3つの注意点、OS／機種依存事例6選などを解説します。 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「JavaScriptのスマホ対応時に知らないと損する16のコト」では、スマートフォン向けWebサイトで利用されるJavaScriptの役割や代表的ライブラリ、実装上の注意点をご紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）」の開発・販売や

JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での

画像の課題は解決されつつある 先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。 現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが

There are nearly 70 million tablet users in the U.S. alone, a figure that has doubled from the year before. This means that nearly 30% of the country's Internet users are browsing on a tablet device. Tablet traffic to e-commerce sites grew by 348% from 2011 to 2012, overtaking smartphone traffic for the first time. With the tablet market as young as it is, its footprint is only going to expand. Th

レスポンシブWebデザイン案件のワークフローが従来通りではなさそうなことはなんとなくわかる。 でも、デザインなしでいきなりコーディングだとか、コーディングしながらデザインだとかは、Webにあまり詳しくないクライアントさんのお仕事で、デザイナーとコーダーも分業体制、という状況では、なかなか実現できない…… という、恐らく受託サイト制作では一般的であろうシチュエーション。 そんなときに、比較的スムーズにレスポンシブWebデザイン案件を進められるだろうフローを考えてみました。 ■最初にレイアウトパターンを絞る 画面設計の最初の段階で、サイト内のレイアウトパターンを決めます。 3パターンに収まるのが理想です。 メインページ：ヘッダ／フッタ、ナビゲーション、メインコンテンツ ┗見出し複数レベル、本文、箇条書き、表、画像配置例、リンク・ボタン例　付き 一覧系ページ：ヘッダ／フッタ、ナビゲーション、メイ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。