ディレクターが思う。Webサイト設計時に必ず注意したい2つこと（+1） | ユーモアのある人生を。【Maka-Veli.com】
まず前提として、「ヒアリング」がディレクターとしては最も重要な要素ですが、 これは別の機会とさせて下さい。 ヒアリングを行う上で、もしくは行った上での対策3つです。 いわゆるターゲッティングです。 必ず必要になる設計要素で、 これが無ければWebサイトの成功は無いと個人的には思っています。 なぜターゲッティングが必要か？ 見たい人が見ないサイトでは、存在価値がありませんよね。 これは、設計時や表面上のデザインに大きく影響します。 女性向け、男性向け、10代、50代、様々なターゲット層を 踏まえ、サイトを構築する事が重要です。 どのように行うか？ ターゲットを想定し、見せたい情報は何か、ユーザーが知りたい情報は何か？ そしてどんな人が訪れる可能性があるか？ それら全てを想定します。 よく行われるのは「ペルソナマーケティング」と言われる手法で、 ペルソナ=架空の人物
モニプラファンアプリ
descriptionFacebookページへ各種タブを追加できるプランです。 無料でご利用になれます。 ご利用できるタブはTwitterタブ、YouTubeタブ、Static HTMLタブ、RSSタブの4種類です。 FacebookページにTwitterのタイムラインを ダイレクトに表示するタブを作成できます。 TwitterのフォロワーとFacebookのファンの 相互流入によりトラフィックの増加を期待 できます。 HTMLを使用し自由にカスタマイズできる タブを作成できます。 HTMLアシストツールを搭載していますので 初心者の方でも画像やFlashを使い 簡単に構築できます。 YouTubeチャンネルをFacebookページ上に そのまま構築することができます。 Facebookのファンへのコンテンツ提供になり 滞在時間の向上が見込めます。 ブログやホーム
時間 vs お金 vs クオリティ
2013年3月23日 Web関連記事 デザイナーのアイデアや考えを記事にまとめているブログ「xheight」の中で時間とお金とクオリティのバランスについて述べた記事「Time vs Money vs Quality」を読んで、短い記事ながら「ほほーぅ」と思ったので意訳してみたいと思います。バランスの取り方は自分次第ですね。料金設定の見なおしをしてみるのもいいかも。 ↑私が10年以上利用している会計ソフト！ この時代、デザイナーはデザインをするだけでなく、それ以上のマルチスキルが求められます。マルチスキルーー例えばビジネス・営業担当、ロゴデザイナー、グラフィックデザイナー、Webデザイナー、Webデベロッパー、SEO専門家、現代のスーパーヒーローなどなど（最後のはなんか違う気がしますが、意味わかりますよね）。 しかしクライアントのこととなると、その点が注目されずにおわります。 通常、彼らは優
IEでCSSの透明度（opacity）設定が反映されない原因
ウェブ・インターネット 画像等の透明度（opacity）がFirefoxで有効なのにも関わらず、IEで有効にならない場合はwidthとheightが設定されていない可能性があります。 IEでは、opacityを設定する際にwidthとheightが設定されていなけれ... 画像等の透明度（opacity）がFirefoxで有効なのにも関わらず、IEで有効にならない場合はwidthとheightが設定されていない可能性があります。 IEでは、opacityを設定する際にwidthとheightが設定されていなければopacityの設定が無視される仕様となっているようです。 例として下記のような書き方をすればFirefox及びIEで透明度の設定が有効になります。 ———————————————————— #menu_bar { margin:0; padding:0; width:800px;
IEにおいてfilter:alpha(opacity)を設定しても、currentStyle.hasLayout=falseだとが透明にならない。 - Enjoy*Study
IEで不透明度を変更するために下記のようなコードを書いたのですが、対象のエレメントのスタイルによって、不透明度が変わらない場合があることに気がつきました。(IE6、7共に) element.style.filter = 'alpha(opacity=50)';だめだったのは、div要素に対して background-colorだけを指定したもので、これに対してwidthまたはheightを追加指定すると、ちゃんと不透明度が効いてきます。 なお、JavaScriptではなくcss上でfilterの指定を行っても同様でした。(width,heigthがないと効かない) script.aculo.us(v1.7.0)ではどうしているんだろうと、ソース(effects.js)を眺めてみたところ、Element.setOpacityでは特に考慮しているような処理は見当たりませんでした。(その先のpr
最近よく使ってる、Web制作に役立つWebサービス的なやつ
少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を
私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
レスポンシブウェブデザインについて | CSS Radar | For Frond End Developers
いまこの記事を読んでいるモニタのサイズは何インチだろうか？ iPhone、アンドロイドOS搭載スマートフォン、iPad、ネットブック、ノートPC、デスクトップPCと数年前なら思いもよらなかったモニタ/スクリーンサイズでユーザはウェブサイトを閲覧し始めている。 今後もさらに解像度が異なる環境が増えていくことは間違いない。 ではそのサイズのモニタごとに、スクリーンごとにデザインを作り、HTML/CSSを書き足していくのか？ その疑問への1つの回答がレスポンシブウェブデザイン(Responsive Web Design)。 多くの場合、CSS3で利用が可能になる予定のMedia Queriesを活用して、モニタ/スクリーンのサイズに合わせて最適なデザインを供給するデザイン/コーディング手法がレスポンシブウェブデザインと呼ばれている。 レスポンシブウェブデザインの例 Simon Colliso
IPv6style:Windows XPでIPv6を体験しよう！ 第1回 インストールと設定の確認
当記事で紹介しているVPNサービスは、以下の基準を元に選定しています。 記事執筆者が実際に利用した評価 VPNサービスを利用したユーザーの評価 VPNサービスの信頼度 価格と性能が両立できているか -「記事執筆者が実際に利用した評価」について- 記事執筆者が実際に紹介しているVPNサービスを利用してみて、おすすめできるかどうかの独自の評価を行っています。 -「VPNサービスを利用したユーザーの評価」について- 選定したVPNサービスを実際に利用したユーザーの評価をリサーチして、高い評価を受けているVPNサービスを選定しています。 -「VPNサービスの信頼度」について- セキュリティ面や知名度などでしっかりと信頼できるVPNサービスかどうかをリサーチして選定しています。 -「価格と性能が両立できているか」について- 利用する価格に対してVPNサービスとしての機能は充分なのか、コストパフォーマ
10年後を生き抜くWeb業界の心得10か条 | JWDA通信 10年後のWEB業界でも役立つ情報を届ける
Webはいつしか、人と人、もしくは企業やブランド間のコミュニケーションをフォローするメインストリームとなってきました。スマートフォン、タッチパッド、キオスク端末、ゲーム機などが世に輩出され、これまで端末ごとに完結していたサービスやデータ、情報もついにユナイトし始めました。Web業界においても、1つの流れがここで集結し、新たなステージへパラダイムシフトしています。そんななか、Web制作者のみなさんに伝えたいメッセージがあります。 Web制作の領域 と問われると、サイト構築ではコーポレート・ブランドサイト制作、ECサイト制作、ケータイサイト制作、プロモーションサイトやバナー制作などが挙げられます。さらに、メールマガジンなどのメールマーケティング、アクセスログ解析や市場調査、マイニングをはじめとしたマーケティングの分野も関係し、ブランディング、クロスメディア戦略、ビジネス戦略なども除外できません
ちょっと待って！デザインを提出する際に書くべきメール。 │ モノづくりブログ 株式会社8bitのスタッフブログです
株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 デザイナーの方でデザインを提出して「なんか変。」「イメージと違う。」「なんか違うんだよな。。」などあいまいな駄目だしを受けたことがある方は多いのではないでしょうか？ 確かにあいまいな表現で駄目だしされても、、と思う気持ちもわかりますが、デザインを提出する際にただ単にデザイン画像だけを「できました！」と提出していないでしょうか？ 今回はデザインを提出する際に書くべきメールについて書いてみます。 デザインは個人の感覚もあるのでなかなか難しいですが、きちんと納得のいく理由付けて提出するだけでずいぶんと印象は変わります。 「なんとなく」つくったデザインには「なんとなく」しか答えがかえってこないものです。 具体的にかなり細かくイメージ指示をもらえないと作れない、ワイヤーフレームがちょっと綺麗になっただけ、、そ
速さはすべてに勝る - 速さを身に着けるための５つのルール - 読んだものまとめブログ
時間をかけてじっくりやることは誰にでもできます。ただ、速さを意識しない人はパフォーマンスが非常に悪いということを認識しなければなりません。ああでもないこうでもないと試行錯誤を繰り返している間に好機を逃して、時代遅れの答えに努力を重ねる結果になります。日進月歩の情報化が進んだ今の時代に学歴、資格、技術があっても『速さ』がないのは有る意味で致命的ともいえます。遅ければ何事も後手に回り、やるべきことが級数的に増えて手に負えなくなります。 図解 超高速勉強法―「速さ」は「努力」にまさる! 作者: 椋木修三出版社/メーカー: 経済界発売日: 2004/11メディア: 単行本購入: 41人 クリック: 500回この商品を含むブログ (45件) を見る 速度が落ちる理由 昔と異なり、大卒が溢れている今では既に知識が豊富な人が揃っているわけで、その知識を活かす場が存在しないというより足枷になっていると言わ
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ)
バンダイチャンネルが7月下旬から11月にかけて期間限定でiphone,ipad上で無料動画を配信していたことをご存じでしょうか？ 公開中にこの記事を書けば良かったのですがいつのまにやらこんなに日にちが経っていました…。このまま記事を下書きにしておくのももったいないので公開してみようと思います。 UI、デザイン、マークアップディレクションを担当 UI及びサイトデザイン、及びマークアップ関連のディレクションを担当させていただきました。実際のマークアップやAJAXの部分はチームまめこの優秀なマークアップエンジニャーさんによるものです。さすが! iPhone、iPadのような新しいデバイスでのデザインはPCと似ているようで非なる箇所が多く、本サイトをデザインするにあたり多く気付かされた事がありました。 iPhone版について インターフェイス 情報を優先順位にのっとってメリハリがPCのそれよりも
[CSS]CSS3の効果的な使い方と陥りやすいワナ
CSS3で何ができるのかという「CSS3で何ができるの？ という時にみておきたいサイト集」という記事をとりあげました。 今回は、そのCSS3を実際どのように使うのか？ ウェブページに効果的に使用した例、陥りやすいワナとその対処方法をWeb Design Wallから紹介します。 CSS3 Examples and Best Practices 下記は各ポイントを意訳したものです。 はじめに テキストのエンボス効果 繊細な角丸とシャドウ アニメーションで回転するDVD 半透明のバー 角丸 微妙なテキストのシャドウ 陥りやすいワナと対処方法 はじめに CSS3の人気はいっそう高くなっています。実際CSS3の新しい機能はウェブに多くの新しい可能性をもたらします。 しかしながら、CSS3はまだ完全にすべてのブラウザにサポートされていないので、あまり興奮しないでください。 だからといって、CSS3を
CSSで実現させるクロスブラウザ対応のドロップシャドウテクニック「Cross-browser drop shadows using pure CSS」
TOP > WebDesign , WebService > CSSで実現させるクロスブラウザ対応のドロップシャドウテクニック「Cross-browser drop shadows using pure CSS」 WEBデザインをよりリッチにそして作り込んでいる感を与えてくれるドロップシャドウ。ドロップシャドウをつける方法は沢山ありますが、様々なブラウザで同じような見せ方をするためには画像を作成したり、背景が複雑な場合は透過PNGをIEでもよみこませるようにして、背景にしたりと色々と面倒です。今日紹介するのはCSSのみでクロスブラウザに対応したドロップシャドウを作るテクニック「Cross-browser drop shadows using pure CSS」を紹介したいと思います。 上記が、各ブラウザでのドロップシャドウの見せ方のサンプルとなります。色の濃さなど細かなところは違う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
僕がWebディレクターの肩書がついてから勉強した15のこと