モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行
レスポンシブサイトを作るときに、タブレットはPC版を表示させたい、といわれることが時々あります。 今回はその対応方法のメモ。 viewportの設定 通常のレスポンシブサイトの場合、 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" /> だいたいこんな感じでviewportを記述すると思いますが、 この場合、タブレットで見たときに横スクロールバーが出てしまいます。 通常のviewportでのデモページ タブレットでPC版を表示したい場合、横幅をPCサイズに固定する必要があります。 <meta name="viewport" content="width=960" /> 960の部分にPC版の横幅を入れて、表示幅を固定します。 タブレ
Private content!This content has been marked as private by the uploader.
今日は、ちょっと技術的な話を。「meta referrer」という、リンクをクリックしてページ移動するときなどにリファラをどう送るかを、ページ側で指定できるタグの実装が進んでいるのです。 グーグルはHTTPSを推奨するけれども、リファラが……グーグルは、サイトがHTTPSかどうかを順位決定の要因とするなど、HTTPSを推奨しています。 でも、自分のサイトをHTTPSにすると、自分のサイトから非HTTPS（ふつうのHTTP）のサイトへのリンクをクリックしたときに、リファラが飛ばないんですよね。 これは、RFC 2616で、「セキュア接続のページから、非セキュア接続のページに移動するときは、リファラを送出するべきではない」と定められているからです（セクション15.1.3）。 とはいえ、Web担のようなメディアでは、「Web担のページから、うちのサイトにけっこう来る人いるんですよ」という反応も大
WEB界隈でよく聞く言葉に「チートシート」というものがあるのですが、これは「cheat（チート） = 騙す、ズルする」という言葉から「ズルするシート」要するに「カンニングペーパー」のことを意味していて、これが転じてWEB界隈ではプログラミング言語やコマンドやショートカットなどを見やすく一覧にまとめてある表のことを指します。 ちなみにこの記事では少し趣向を変えて、WEB界隈で働く人が「これは便利かも」と重宝しそうな「マーケティング」と「SEO」に関するチートシートを集めてみました。 WEBマーケティング関連のチートシート3+2個 大きな意味での「WEBマーケティング」全般に重宝しそうなチートシートを集めてみました。 www.seojapan.com リスティング広告運用チートシート LPO改善チェックリスト チートシートではないけど「これはWEBマーケティングに重宝するかもなー」というチェッ
職業柄色々な会社のWebディレクターと一緒に仕事をします。画面設計やスケジューリングなど、人によって一つひとつやり方が違うので、仕事をしながらディレクション業務を学べるメリットがあります。その中で、仕事がしやすい、進行がスムーズだなと感じた方の特徴をまとめてみました。 連絡がまめでレスポンスが早い個人的に一番の特徴はこれでしょうか。進行管理が上手な方はとにかく連絡がまめです。いつでも連絡がつくし、必要なことはその都度報告がきます。そして反応が早い。こちらが何か質問すると、すぐにクライアントに確認をとり、即座に返信がきます。場合によっては、質問している間に作業が止まることもあるので、レスポンスが早いというのは、それだけで制作側にとっては心強い存在なのです。 スケジュールにディレクターチェックと、その修正作業の時間をいれている例えばデザインの初稿を提出する時、一般的にはクライアントの前にディレ
バーンワークス株式会社では、Web サイト制作時における制作物のクオリティを一定に保つため、社内における制作ガイドラインを定めていますが、このガイドラインを公開いたします。 制作ガイドライン - バーンワークス株式会社 burnworks/burnworks-guidelines ： GitHub ガイドラインは 「Creative Commons （クリエイティブ・コモンズ） -- 表示 - 非営利 2.1 日本 -- CC BY-NC 2.1 JP」 ライセンスの下に公開され、ライセンスの範囲内においてどなたでもご利用が可能です。 ガイドラインの各項目、内容に関しては弊社の見解、基準によるものですが、文書としては汎用的な作りとなっておりますので、他の Web サイト制作会社、フリーランスの Web サイト制作者にも、ガイドラインのひな形としてお使い頂きやすいのではないかと考えております
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
こんにちは、株式会社LIG 執行役員の寺倉と申します。 自社サイトの分析、競合他社、類似サイトの発掘と分析は、KPI設定や改修、WEB戦略を立てる上で非常に重要です。 今回は登録不要、かつ無料で使えるサイト分析ツールとサービスを8つほどまとめてみました。これが誰かのお役に立てば幸いです。 2007年から自社メディアで集客を行っている弊社LIGにご相談してみませんか？ Webサイトのみで年間1,000件以上の問い合わせを獲得！ KPI設計など上流工程から、オウンドメディア全体のコンサルティングに対応 サイトリニューアルと併せてのご提案も可能で、CV数1.5倍、離脱率4%改善など成功事例多数 LIGに問い合わせてみる 株式会社LIGとは 2007年設立、東京都台東区発のWeb制作会社。年間150サイトリリース、毎年複数のWebデザインアワードを受賞。Web制作だけでなく、月間200万PVのWe
こんにちは、結婚式で悪友に高校時代のポエム的なものを晒されたゆうすけです。 そういうの、本当勘弁してほしいんだよな。 先日Macの古いデータを整理していたところ、2008年頃のウェブサイトのキャプチャー画像を大量に発見。当時はWebデザイナーではなくエディトリアルデザイナーだったのですが、デザインの練習（模写）のために取り溜めていた様子。 あの頃の自分は結構真面目だったのかもしれない。 やっぱり今とだいぶ違うなー。具体的にどこが変わったのかな？と結構楽しく眺めていたのですが（どうしてアナログデジタル問わず、掃除をすると懐かしくて手が止まってしまうのか！）、せっかくなので記事としてまとめてみることにします。 当時の担当デザイナーがもしこれを見たら、恥ずかしくてたまらないかもしれないですけどね。一度世に出したものですからね。しょうがないね。 大阪府知事に橋下徹氏が就任し、船場吉兆があの伝説的な
最近ワンカラムレイアウトをよく見かけませんか？なんで増えているのでしょうか？その理由を僕なりに考察してみました。 1.バイラルメディアで採用されていることが多い。 バイラルメディアは、1カラム化することでシェア数されやすくするということに趣旨を置いたサイトです。サイト閲覧数よりもFacebookやTwitterでのシェア数がKPIとなっています。そのため１セッション当たりの閲覧PV数よりもシェアされやすいワンカラムを採用しているところが多いです。 2.レスポンシブデザインの普及 レスポンシブデザインの普及によりスマホでは１カラム、PCでは２カラム（サイドバーあり）になっているサイトが増えてきました。繰り返し改善していく上でPCとスマホが同じようにワンカラムレイアウトならばサイトの改善がし易いです。 ワンカラムレイアウトのメリット・デメリット。 メリットについて 1カラム構成の最大のメリット
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd（72種類のレイアウトとチャート） .ai（72種類のレイアウトとチャート） .sketch（72種類のレイアウトとチャート） .png（72種類の各レイアウト） 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。
WEB制作において、クライアントに確認の依頼をして、修正依頼って夜中に来たり、納期ギリギリに来たりすると困りますよね。それで愚痴る人も少なくないと思います。でも、よく考えたらなんでそんなに時間がかかっているんでしょう？ もしかしたら、クライアントが修正依頼を報告するまでの課程に問題があるのかもしれません。よくいるクライアントは、修正依頼を書くまでの課程が… 修正確認ページをぷりんとあうとー → 手書きで修正 → スキャン → 送信 → また修正見つけたけどさっきスキャンした紙どこやったっけ？ → またプリントアウト → 手書き修正 → スキャン → あれ一枚目の修正どんな内容だったっけ？ → 以下無限ループ ・・・・無駄しか無いわ！！！無駄以外探すのが難しいわ！！ まぁ、でもこれはクライアント側も可哀想。WEB屋ならまだしも、WEBサイトの修正依頼にどれだけの時間を使わせるつもりかと…そり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
