早稲田大学のサイトリニューアルがなぜこんなにひどいのか。 - 隣り合わせの灰と青春
久しぶりにセミナー以外でブログ書きます。 このたび早稲田大学のWebサイトがリニューアルされました http://www.waseda.jp/top/ が、かなり論議になりそうなリニューアルなので、 情報設計専門家として内容を見てみます。 1.なにがグローバルなサイトなの？ 今回のリニューアルではIE10以降を対象外としていて、 普通に使っているIE7や8では見ることができません、 これはアクセシビリティ上かなり問題だと思います、 多くの人が目にする大学というサイトでノンアクセシビリティを貫くというのは、 いまの時代にそぐわないのではないでしょうか。 わざわざIE10にアップデートまでしてみるサイトでもないですしね。 ぜんぜんグローバルじゃありません。かっこ悪いです。 2.レスポンシブデザイン？ スマートフォン、タブレットに対応したサイトになったみたいですが、 そもそものとこ
コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive
デモページ Responsive（レスポンシブ） Adaptive（アダプティブ） Liquid（リキッド） Static（スタティック） Responsive（レスポンシブ） レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。 デバイスごとに合わせた一種のリキッドレイアウトであると考えることもできます。 Liquidapsive: Responsive Adaptive（アダプティブ） アダプティブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。レスポンシブとは異なり、単にレイアウトを変えるだけではありません。ユーザーのコンテクスト（環境・状況・目的など）に応じて表示するコンテンツ（レイアウト）
イケダハヤト氏が全クリエイターに対して宣戦布告を開始 - ヨッピーのブログ
イケダハヤトさんがこんな事を書いております。 PVアップに貢献するのも胸糞悪いから全文コピペするので、 本サイトに見に行かなくてもいいしリンクも張りません。 まあ意趣返しみたいなやつです。 本人には届くだろうし。 以下転載。 ＝＝＝＝ コンテンツをパクるのは何故いけないの？教えて！おじいさん！ 最近、コンテンツの「パクリ」についての記事が増えてますね。 「パクる」のはなぜいけないの？ たとえばこんな意見。 コンテンツの盗用は明確な著作権法違反なのだが、ネットの中では「キュレーション」だったり「バイラルメディア」等と、それらしい名前を付けて人の褌で相撲をとる行為がはびこっている。 こういうものを日々見ていたら海外の記事を断りなく翻訳して、自社サイトに掲載することの何がイケナイコトなのかよくわからなくなっても仕方ない気もする。 （中略）ネットは便利である反面、著作物の違法コピーはどうしても流通
高コンバージョンを保つウェブサイトが採用する5つの行動心理学テクと実例|グロースハックジャパン|Growth Hack Japan
7/25最新記事 見落とされがちなオフライン上での3つのリファラルチャンス edited by Ryutaro Mori 過去に何度もお伝えしてきた行動心理学を利用したコンバージョン最適化テクニック。 本日は、growth hack japanの中でまだお伝えしてなかった行動心理学テクを、実例とともに5つ紹介します。 参考:5 Psychological Principles of High Converting Websites プレグナンツの法則 プレグナンツの法則によると、人間は明確で順序だった物事を好み、複雑なアイディアやデザインを恐れる傾向にあります。 シンプルなものほど予期せぬ不快なサプライズを引き起こしにくいということを本能的に感じ取り、それに従ってシンプルに物事を解釈する人間の傾向を表しています。 例えば以下の英文を見てみましょう。 ① Welcome to growth
「ほんとに福島で撮ったのか？」と海外から疑われている「HAPPY福島版」登場人物の背景（熊坂仁美） - エキスパート - Yahoo!ニュース
先日の「HAPPY福島版」に関する記事は大きな反響をいただき、たくさんの方にツイートやシェアをしていただいた。 ファレルの「HAPPY」福島版を作ってわかった、地域コンテンツの新たな可能性 この記事でも触れたが、このHAPPY福島版を作ったきっけの一つは、例の「美味しんぼ問題」だった。 あのとき町や県から抗議文なども出されたが、そのわりに私のまわりの福島の人たちは「またか」という感じであまり話題にもされてなかったように思う。 でも、私自身は憤りを感じ、もやもやしていた。 そのもやもやの理由を、福島市出身の弁護士石森 雄一郎氏が昨日の記事でうまく表現してくれていたので引用したい。 美味しんぼ「鼻血問題」 福島出身の弁護士はどう見たか？ 問題となった『美味しんぼ』の回を読んで、私が率直に思ったのは、『こんなに簡単に結論が出せるはずがない』ということです。作中の『意見内容』が問題なのではなく、一
ウェブのデザインやアイデアによい刺激をうける日本のウェブサイトのまとめ
いつもは海外のウェブサイトをテーマごとにまとめて紹介していますが、たまには日本のもと思い、まとめてみました。 デザインやアイデアによい刺激をうける国産のウェブサイトを紹介します。 海外のも定期的にまとめています。 面白いアイデアを使った最近のウェブサイトのまとめ -2014年3月 デザインや仕掛けが素晴らしいウェブサイトのまとめ -2014年1月 MIDORI AOYAMA DJ/プロデューサー Midori Aoyama氏のサイト。フラット・スクロールの定番のトレンドに斜めのグリッド、ポリゴン、アニメーションなど最新のデザインが非常にかっこいいです。制作会社はLETTERS, INC.で、今日リニューアルしたばっか！
HTML5でサイトをつくろう
若者を中心に爆発的な人気となり、ユーザーを増やし続けているInstagram。Web関連の仕事をしていると、最近ではクライアントからも「Instagramを使いたい」という要望も聞くようになりました。Instagramが今どうなっているのか？どう活用し、どのように見てもらうのか、初歩的な内容から少し専門的な内容まで、参考になるサイトや記事をまとめました。
知っといて損はない、魅力的なヘッダーデザインを作成するための目的・用途別の指南書。（photoshopなどを使用するデザイナー向け）
HOME ブログ webデザイン , フォトショップ , マーケティング , 画像加工 知っといて損はない、魅力的なヘッダーデザインを作成するための目的・用途別の指南書。（photoshopなどを使用するデザイナー向け） 知っといて損はない、魅力的なヘッダーデザインを作成するための目的・用途別の指南書。（photoshopなどを使用するデザイナー向け）2014.01.29 ホームページやブログ・コンテンツサイトに欠かすことのできないヘッダー（アイキャッチ）が果たす役割はとても重要です。 ユーザーがサイトに訪れた瞬間に嫌悪感を抱けば即離脱します、その判断は3秒以内だとか・・、どれほど手の込んだ有益なコンテンツを創造しようともユーザーに届く前にブラウザを閉じられてしまえば何の意味もありません。 ウェブサイトにおいてどうすれば効果的にユーザーの視覚に訴えることができるのだろう？ クライアントに「
AppStoreで人気の「無料音楽アプリ」５つを通信解析してわかった音楽無料提供の仕組みとは （iLoveMusic・MusicCloud・DropMusic・Music Stream・Music Bank）
iPhoneのAppStore総合ランキング上位に多数存在する「無料で音楽聴き放題アプリ」たち。数百万というダウンロード数と、そこからの広告収益を稼ぐそんなアプリたちに共通する「最新の音楽を無料で提供できる仕組み」について紹介します。キーワードは金脈API、かな。 ↑中高生の認知度がかなり高いのではないか、と予想しています（自分自身が使っていなくても、友達の一人くらいは使っているだろう的な）。「無料音楽プレイヤー」「無料音楽取り放題」なんていう言い方もあります。 目次 1. 分析対象の人気の無料音楽アプリ一覧2. 分析方法3. 分析結果4. iLoveMusic4.1. コンテンツについての説明4.2. 分析結果5. MusicCloud5.1. コンテンツについての説明5.2. 分析結果6. DropMusic6.1. コンテンツについて6.2. 分析結果7. Music Stream7
いい話（W社を辞めました） - アスペ日記
（2015/09/01追記：この記事は私がW社に在籍した2013年4月から2014年4月までの間の個人的な経験に基づくものです。就職の参考にされる方は、その後W社の社風や開発者の扱いに変化があったかどうか等についてご自身で最新の情報を得ていただければと思います。） （2019/08/17追記：社名を「W社」に置換しました。） 記事タイトルの通り、W社を退職したので、退職エントリを書く。 （最近雑文に対していろいろと予防線を張ることが流行っているらしいので、一応これもポエムだと書いておく。役に立つことは書いていない） 今日が最終出社日だった。 ちょうど 1 年ぐらい勤めたことになる。 2 社連続で 1 年で辞めたことで、自分が社会不適合者であることが誰の目にも明らかになってしまった。 これから先の人生の見通しは暗い。 その間に子供が生まれたのだが、不憫でたまらない。 いい話というのは、Goo
パララックスサイトを作る時必要だったリソースと使い方のご紹介！制限時間12時間で調べあげた情報色々！ | バンクーバーのうぇぶ屋
ちょっと遅くなりましたが皆様あけましておめでとうございます！ さて、新年一発目は先日こそっとあけおめコンテンツとして公開させて頂いた『 バンクーバーな僕ら – 新年あけましておめでとう巨大4コマ』で遊びで作ったパララックスページの作り方に関するお話です。 このパララックス漫画作る事になった時、実は こんな状況だったのでとにかく完全に時間との勝負だったんですが、日々パララックスに関する情報には目を通すようにしてたおかげ？もあって、リソース関係には困らなかったのでなんとかギリギリ間に合わせる事が出来ました。 今日はそんなリソース集としてお世話になった作者の方々への感謝の気持ちと、このパララックスサイトってどうやって動いてんの？ってご質問もあったので、折角だしまずは簡単に今回パララックスページを作った手順と作り方のサンプルを全部ご紹介させて頂ければと思います！ ぶっちゃけお客さんに出す内容でも、
奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ
【追記】Twitterで教えてもらったのですが、13行が改善されて3行になってました。ご対応頂いた市役所のご担当者様、富士通のご担当者様、お疲れ様でした。今後とも、よろしくお願いいたします。【追記終わり】 住民票を郵送で取り寄せようと思って市役所のサイトを見たんですよ。今まで何回も見てるし別に普通のクソみたいな使いづらい行政サイトだなって相変わらず思ってたんです。でもね、あれ、これはおかしいなって、思ったんです。なんかね、変だな～って。それがね、この画像なんですよ。 委任状 – 奈良市 すっごいパンくずなんですよ…パンくず食い過ぎてお腹いっぱい。マジで。 僕らの業界ってまぁどの業界でもそうだけど仕事の流儀とか、そういうのあるじゃないですか。使いやすいサイトを作りたい人、ある程度ユーザビリティを犠牲にするけどかっこいいサイトを作る人、でもこれ酷いでしょ。誰もパンくず13段にしろなんて望んでな
スキルが増えた！今後を生き抜くためにＷｅｂデザイナーも習得しておきたい技術
作成：2014/03/17 更新：2014/11/01 Webデザイン > クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コンテンツ設計 １．イラスト作成のスキル ２．写真の撮影技術と知識 ３．動画編集の技術 ４．コピーライティング ５．モーショングラフィック ６．電子書籍の作成 Webデザイナーの基本知識とスキル ７．UX・UI・IAの知識 ８．レイアウト基本原則 ９．配色＋色彩計画 １０．フ
★★★隙間を埋める！フッターをウィンドウ下部に固定する3つの方法 | 株式会社LIG
こんにちは、モモコです。 ページを作っている際に、想定していたコンテンツ量よりも原稿が短く、フッターの下にブラウザとの隙間が空いてしまう事がありました。 このスカスカ感を埋めるべく、フッターをウィンドウ下部に固定する方法を調べたので備忘録も兼ねてご紹介します。 positionを使い、フッターをコンテンツ下部に固定する方法 【HTML】 <html lang="ja"> <body> <div id="wrap"> <header>ヘッダー</header> <div id="contents">コンテンツ</div><!-- contents --> <footer id="footer">フッター</footer> </div><!-- wrap --> </body> </html> 【css】 html,body{ height:100%; } #wrap{ width: 100%
これで完璧！Webサービスの情報設計をカンタンにする設計用テンプレート完全版
はいこんにちは。最近なぜか風邪が治らないナカムラです。何食ったら健康になれるんでしょうか。誰か教えてください。 さて、サイトを作って！とザックリ投げっぱなされた依頼について、何を掲載するべきで何をどう設計するべきなのか。悩みますよねぇ・・・。 今回は日本ディレクション協会の人気講座「0からのWebディレクション講座：設計編」で、DCHSの高瀬さんが非常に分かりやすい見解と考えまとめ用のテンプレを公開してくれましたので紹介してみます。 以前からこのサイトでもその重要性についてブツブツ言っている感情設計についての考えとも重なる部分多めでしたので、両方読んでいただけると理解が深まるかもしれません。 感動設計テンプレート＆講演資料 ユーザーが感動するウェブサイトを実現するために必要な情報設計とは？ 高瀬さんいわく全てのWebサイト、サービスは「ユーザーを感動させるため」に存在しているし、そうあるべ
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
NIKKEI STYLEは次のステージに
http://did2memo.net/2014/05/15/xiami-com/
