文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう
1. 文系デザイナーでも大丈夫！ レスポンシブWebサイトを で作ってみよう November 3,2012 WordCamp Osaka 額賀 順子 12年11月3日土曜日 3. 自己紹介 額賀 順子 | ヌカガジュンコ フリーランスのWebディレクター／デザイナー。 つまり１人で大概の事はやっちゃう人。 Webデザインを中心に、企画・色彩設計、スマートフォンサイト作成など幅広く 制作を手がけています。 綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん な効果が欲しいのか。プランニングを重要視します。 制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ クター、セミナー講師も兼務。 Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事
[HTML] パンくずリンクについてのまとめと考察
パンくずリンク|パンくずリスト（breadcrumb navigation）はどうコーディングするのが今風なんだろう。 ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。 パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、 よくあるデザインパターンは次の通りである。 1行テキスト テキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。 ページタイトルを > で繋いだもの ページタイトルを > 以外の文字で繋いだもの シンプルなリンクの羅列 区切り文字を入れずに画像やCSSで階層を表現する。 マルチステップ 開始から完了までの行程を表示する。 サブナビゲーションつき 各ページリンクに属するページを
![[HTML] パンくずリンクについてのまとめと考察](https://cdn-ak-scissors.b.st-hatena.com/image/square/d43d21ea93cda04d99f538309d396c15d2b3bb3f/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2010%2F12%2Fdelicious.png)
画面展開の表記方法 – capeknote
iphoneアプリの画面設計をしていて、画面フローの表記をしようとして普通の画面フローチャートだとUIインタラクションを表記しにくいよね、と思ったので考えてみた。 画面フロー図の限界webの画面フロー図は以下のことができないなー、不便だなーと思ってた。 画面展開を表記する記法がない。webだと_blankくらいしかないけどアプリだと不便 画面が内包しているコンポーネントを表記できないので、画面のどのボタンが次の画面につながっているのかわからない。 ↑レベルのを練ろうとするとワイヤーフレーム/プロトタイプをつくる作業になってしまう。プロトタイプだと逆に画面のつながりや展開の法則性がとらえにくく、整合のとれたインタラクションデザインが試行錯誤しにくい そもそも画面展開の種類って網羅的に把握されてる？ 構造化寄りの表記方法は「情報アーキテクチャ、インタラクションデザイン記述のためのビ
PowerPoint を使ったプロトタイピング
プロトタイプを作るソフトウェアは Visio のような高度な機能があるものを含めて複数あります。一番最初の段階であれば紙でも良いと思いますが、Webサイト上でのインタラクションを可能な限りリアルに再現して検証するにはパソコン上で行うのが最も適しています。どのツールが良いか迷っている方もいると思いますが、どうやら Microsoft では PowerPoint 2007 がワイヤーフレームを作るツールとして使っているそうです。 2007年、韓国で開催されたカンファレンスで PowerPoint 2007 を使ったワイヤーフレームに関するセミナーがありました (Silverlight ムービー)。Microsoft には Visio があるのになぜ PowerPoint を使うのかというと、PowerPoint のほうが使える人が圧倒的に多いだけでなく共有もしやすいからだそうです。例えば Ex
デザインと読解力（文章に書かれたこと／書かれていないことを読み解く）: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 小学生の頃、国語の授業で教科書に載っている話を読んで、そこに出てくる登場人物が「何故そう思ったのか」とか「どうして、そんなことをしたのか」などという質問をよくされた。テストでもそういう問題があったが、それって意味あるの？と感じていたものだ。 でも、最近、それって実は重要だったんだなということに気がつきました。 それって文章に書かれた状況を俯瞰しながら登場人物の行動とその背景にあるものを構造的に理解するということなのだから。 そう。それはデザイン思考でも「利用状況の把握」という点では欠かせないスキルです。デザインサーベイを行う際には5W1Hで利用状況を捉え明記するという作業が必要になる。 誰が、いつ、どこで、何を、どのように行ったのか？ また、それは何故そうしたのか？ 特に何
ユーザーエクスペリエンスデザインの成果物リスト | Web担当者Forum
ユーザーエクスペリエンス（UX）デザインの世界に身を置くわれわれにとっては、いまや心浮き立つような時代となった。UXの価値はますます広く認められるようになり、次々に生まれる新たなテクノロジーやメディアを超えたトレンドは、UXデザインの実践面で飛躍的な進化を生み出す土壌を整えつつある。 私自身、新たなチャレンジの数々に見舞われてあやうく安全圏から押し流されそうになりながらも、インフォメーションアーキテクトとしてはそれらを大いに楽しんでいる。これまでに、ソーシャルソフトウェアやリッチユーザーインターフェースをデザインしたり、モバイル検索の未来についてのシナリオを描いてみたり、いろいろなチャネルやアプリケーションにまたがるようなUXを設計してきた。するとそのうち、VIPルームの“エラい人たち”に自分のアイデアをご理解いただこうと苦心する場面が次第に増えつつあることに気づいた。 そんなわけで、私は
www.flatandtree.com is Expired or Suspended.
「 www.flatandtree.com 」のページは、ドメインが無効な状態です。 ウェブサイト管理者の方はこちらから変更・更新を行ってください。 「 www.flatandtree.com 」is Expired or Suspended. The WHOIS is here.
情報設計の重要性、わかってますか？: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 ひさしぶりにユーザビリティの話です。 ただし、最初に言っておきますが、Webの話じゃないのであしからず。 ユーザーインターフェイスのサイズと情報の構造化情報設計を行う際には、情報をその内容に応じて、階層構造化します。 この情報の構造化が意味をもつのは「生きていることの科学／郡司ペギオ－幸夫」でも書いたように、情報量（コンテンツ量／機能の種類など）とユーザーインターフェイスの物理的なサイズとの関係から「部分情報問題」が起こりえるからです。 このように問題を定義するならば、これからのインタフェースは「部分情報問題」になるといわざるをえない。なぜならば、インタフェースにかかわる情報はより複雑化して増大する傾向にあり、ユーザーがこれらの多くの知識を個々の機械に対して把握することは容
ユーザー行動を構造的に分析するための5つのワークモデル: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 ひさびさに人間中心設計（Human Centered Design＝HCD）に関する話題を。 ここで書くのは、ユーザー調査から得られたユーザーの行動を構造的に分析するために用いる、5つのワークモデルについて。このワークモデリングの手法はContextual Designで用いられているものです。 ペルソナ／シナリオ法の使われ方に問題あり？で、なんで急にこんな話を書こうかと思ったかというと、世の中のペルソナ／シナリオ法の使われ方に疑問をもったからです。 前に「ユーザー行動シナリオは最初のデザイン」というエントリーで「ペルソナ／シナリオ法の肝は、実はペルソナのほうじゃなくてシナリオのほう」だと書きました。 しかし、世の中ではどうも「ペルソナ」という言葉のほうばかりが先走ってしま
私的インフォメーション・アーキテクチャ考：15.インターフェイスの質量: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 まずはこの図を見て下さい。なんだかわかります？ 答えは後ほど。 義歯の違和感さて、僕は、鉄製のスプーンやフォークがちょっと歯に触れた時の感覚がたまらなく嫌いです。スプーンがちょっと歯に当たったりすると、まるで歯全体が金属になったような違和感を感じたりする。それは普段、意識することのない歯の質感をあらためて意識させられるからかもしれません。 義歯の違和感というのは、平凡な僕らでさえ、歯の潜在する機能を発見できるような、それによって身体の内と外の関係を変えていけるような、そういった道具というわけだ。歯の質量は、義歯の違和感によって再発見され、それによって僕たちは、改めて違和感を避けるような噛み方をしたり、咀嚼の仕方を工夫する。（中略）いずれにせよ、違和感の発見によってインターフ
第45回 サイトマップの代表的な三つの型とそのバリエーション
今回は，サイトマップについて考えてみます。実はサイトマップの定義は余り明確ではなく，プロジェクトや開発部隊によって，その意味するところは微妙に異なるように思えます。ただし，本来の目的は，ほぼ一致していて，「プロジェクト全体を俯瞰する」ために存在すると言ってもいいように思えます。代表的な三つの型とそのバリエーションの例を示していきます。 サイトマップ基本形三種 サイトマップは，その構造から，大きく三つに分けられると思います。 一つ目は，階層型（hierarchy[階層]から「Hiermap」と略したりします）。二つ目は，2.5次元型（三次元の表示ではないけれど，平面的ではない立体的な描画方法を採っているもの）。そして，（同心）円状にページを配置した同心円型です。 これは構造上からの分類で，用途別に分類したりする方法も存在しますが，「定説」的なものが見当たらないので，ここではこの三つの分類で話
手書きインターフェースでアジャイルなサイト構築を支援する『DENIM』 | POP*POP
昔からあったものですが、ひさしぶりに見てみたらすっかりバージョンアップしていたのでご紹介。 ワシントン大学が開発したDENIMは手書きのインターフェースでサイトマップを作成、HTMLまで生成してくれるというすぐれものです。 タブレットPCと相性が良いですが、マウスでもぐりぐり操作可能です。 簡単な使い方を以下にご紹介。 ↑ 起動直後の画面。 ↑ 文字を書いていくとそれが一つのページとして認識されます（画面はHomeと書こうとしていますｗ）。 ↑ 複数作ったページ。リンクもドラッグで簡単に貼れます。 ↑ ページの詳細へ。左側のメニューでサイトマップレベルか、詳細ページレベルかなどが選択できます。 ↑ 円形メニューでさまざまな操作が可能。HTMLでエクスポートなどもできますよ。 ちなみにこうして作られたサイトをHTMLにしたページのサンプルは以下からどうぞ。なかなか味がありますよね・・・。 »
CMSとモバイルとフィードと四畳半社長: 情報量は23ビットを超えたあたりからどうでもよくなる
東京都文京区本郷でとあるCMS開発会社を営む社長のブログ。さっきまで「越後のCMS問屋」だったのですが、会社が新潟に移転したと勘違いされたようなので変えました。 モバイル、ゲーム、フィード、Ajax、Flash、ハイテクグッズあたりのはやりモノが好きです。 最新作「メルルーの秘宝」がドワンゴから提供中 週刊アスキーで「2045年の週刊アスキーをつくる」連載中 ビサイド南治さんのところでPS3についてアツイ思いが語られています。 僕はPS2の頃、敵対勢力にいて、実際のプログラミングをした経験はないのでPS2がいかに大変だったのかは伝聞に頼るしかありませんが、まあ要するに書かれているようなことは、きっとあるのだろうなと思います。 でも、末期のスプライトと今のポリゴンというのは、非常に似ていると思うのですよ。 ファミコンの頃、スプライトは同時に横4つまでしか並べることが出来ませんでした。
GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
JAGAT,WebSigセミナー2連戦 - Vox
この週にあったことをまとめて。JAGATの開催したセミナーに参加してきました。 <a href="http://www.jagat.or.jp/story_memo_view.asp?StoryID=10176 target=">受け取る側の立場に立った「情報デザイン」とは？ クロスメディア制作に求められる情報配信のアプローチとノウハウ</a> ここは印刷関連の団体でありながら、Web関連でもなかなか良いセミナーを開催していて、今回のテーマも非常に楽しみだった。セミナーは3人のパネリストによるトークだったが、都合により高山さんのセミナーしか聞けなかった。残りは<a href="http://www.technorati.jp/search/JAGAT?language=ja target=">Blogosphereで探ろう</a>と思ったら一件だけか。おっとテクノラティがリニューアルしてま
ユーザビリティって単にユーザーインターフェイスの問題ではないよね: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 上記の２つのエントリーにも何人かの方からはてなでブックマークしてもらったんですが、そのタグに[インターフェース]だとか、[UserInterface]だとかいうタグがあるんですよね。もしかしたら、Webユーザビリティって単にユーザーインターフェイスの問題として捉えられてるのかな？なんて思ったんです。Jesse James Garrettの5 Planes Modelだったり、ISO9241-11によるユーザビリティの定義に含まれる有効さ、効率性、満足度といった評価ポイントなどについても書いたので、Webユーザビリティ＝ユーザーインターフェイスの問題ではないことはわかっていると思いますが、もしかしたら、まだ、Webユーザビリティがユーザーインターフェイスだけの問題だと考えてい
Web2.0ナビ: PHPでTagCloudを簡単に実装する方法
いいね！ 0 ツイート B! はてブ 44 Pocket 2 pearのライブラリを使うことで今流行りのTagCloudが簡単にPHPで実装できる。 ライブラリはPEAR :: PEPr :: Details :: HTML_TagCloud、日本の方が作られたようだ。ソースを見ていただければわかるが、非常にシンプル。 ここで紹介する内容ではないが、非常に簡単だったので、参考までに。。 まずはインストールをする必要があります。 wget http://catbot.net/src/HTML_TagCloud-0.0.4.tgz pear install http://catbot.net/src/HTML_TagCloud-0.0.4.tgz あとは下記のようなサンプルソースを書くだけ。シンプルで非常に便利。 <?php require_once(‘HTML/TagCloud.php’);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HugeDomains.com
http://www.yasuhisa.com/could/entries/000992.php
Websites as graphs - an HTML DOM Visualizer Applet