yamadarのブックマーク - はてなブックマーク

成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie

約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム

yamadar 2020/12/17

リンク

アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ

スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。︵以降、両者をガイドラインと略します︶スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく︵comScore調査／2014︶、多くの時間をアプリの中で過ごしているためです。さらにユーザは﹁これは

yamadar 2015/07/07

リンク

PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ

スマートフォンの普及で、PCで閲覧するWebサイト︵以下、PCサイト︶に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。表示デバイスの多用化スマートフォンアプリの一般化タッチスクリーンの普及トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景

yamadar 2015/02/18

リンク

UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ

前回エントリーでは﹁UIデザイナーが理解しておくべき11種類のナビゲーションと特徴﹂として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい︵動き︶、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。メニューバーメニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない

yamadar 2014/08/15

リンク

ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ

HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。ターゲットブラウザで大きな崩れがない。リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。バリデーター・チェックでエラーが出ない。逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ

yamadar 2013/11/29

付け加えたい事はあるけど、方向性は概ね同意。bootstrapとかでdiv乱用してるサイトが目に付くので、基本に立ち帰るのは良いと思う。

*CSS
*html

リンク

デザインに立体表現を取り入れるときのセオリー×6 | ベイジの社長ブログ

iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。セオリー1‥現実世界の﹁光源﹂の基本ルールを守る唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか？左側、﹁A﹂のボタンには、以下のような光源の矛盾があります。ボタン本体の影は、右下に付いている。つまり、光源は左上。へこんだAの影は、右上に付いている。つまり、光源は右上。ドロップシャドウは、真下に付いている。つまり、光源は真上。一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での﹁光源﹂︵＝影︶の基本ルールです。

yamadar 2013/09/19

リンク

Webの仕事をするなら最低限知っておくべき戦略フレームワーク×10 | sogitani.baigie.blog

経営やマーケティング、ブランディングなど、ビジネスを語る際に必要な論理的思考。その思考パターンを定型化し、誰でも使えるようにしたのが戦略フレームワークです。戦略フレームワークはビジネスのあらゆる分野で使われており、有名・無名を含めると、膨大な数が存在します。戦略フレームワークを使うと、現状を論理的に構造化し、客観的に俯瞰できるようになります。また、いつもフレームワーク発想で考えるクセを付けていると、ヒアリングしたその場で企業が抱える問題点が見えてきたり、自分の主張や提案を、分かりやすく説得力をともなって伝えることができるようにもなります。 Web業界はテクノロジーの影響が非常に強い業界です。特に制作や開発に深く関わる業種・職種ほど、ビジネスの本質ではなく、技術的なトレンドに流された発想に陥りがちです。しかし、戦略フレームワークの考えをマスターしていれば、技術トレンドに流されず、ビジネス

yamadar 2013/02/28

素晴らしいまとめ。

リンク

はてなブックマーク

タグ

ブックマーク / baigie.me (7)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス