このたび会社を退職することが決まり、デザインについてほとんど初心者である後輩に対して私の思考を託す時が来ました。 私自身WEBシステムの制作を手がけたことはなく（ないのかよ！！と全力でつっこんでおｋ）今度のプロジェクトでうちのチーム初のWEBシステム制作案件があるそうなので、デザインする時のポイントなどを自分なりにまとめてみました。 私は携われないんですけどね＼(^o^)／ 様々なWEBシステムのデザイン よいデザインはデザインをする対象（今回はWEBシステム）のことを知らなければ出来ません。 自分の考えだけでデザインをはじめると、思考の偏った使いにく～いものになってしまう恐れがありますので 必ず調査をしましょう。 そして、何故その要素がそこに配置されているのかを考えましょう。 以下に様々なWEBシステムのキャプチャと 超稚拙で言葉足らずな安易すぎる説明を掲載します。 ですが、掲載されてい

2013年3月23日 Webサイト制作, Webデザイン Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました！リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。 ↑私が10年以上利用している会計ソフト！ 打ち合わせ リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、 とにかく読みやすく、スッキリと 差し色にピンクを使いたい jQueryを使った何か仕掛けが欲しい の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね

Togetter - まとめ「pukiwiki、はてなトップページの妙な恐怖感」 http://togetter.com/li/8513 気づいた点をまとめてみました。 要因1　ロゴマークが認識できないため、Webサイトの「存在」も認識できない GoogleにもYahooにも、Webサイトのシンボルとしてロゴマークがあります。「いやいや、そんなんpukiwikiにもはてなにもあったじゃん」と思うかも知れませんが、この2つのWebサイトのロゴマークの位置に注目してください。左上の隅にピタッとくっついてますよね。これだとページをパッと見た瞬間に、視界に入らないはずです。つまり認識できません。 ※実際に自分のブラウザで開いてみてください はてな http://www.hatena.ne.jp/ Twitterクライアント - TwitterまとめWiki http://usy.jp/twitte

尾野（しっぽ） @tail_y 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:49:50 нσυѕαι тσяυ／縫采 徹 @firty_housai 何があった…RT @tail_y: 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:50:38

見た目は重要である。日本のITの世界は、見た目を軽視しているのではないだろうか。見た目といっても、人の外見ではなく、モノやサービスに関してである。意匠としてのデザインだと考えてもらってもいい。今回は、この話題について書いていく。 本題に入る前に、一つクイズを出題したい。ホープとピースというどちらも昔からあるたばこがあるが、箱に書いてあるHOPEとPeaceの文字のどちらが優れているか、である。 どれだけものの見た目、つまり外見やデザインについて普段、意識しているかを確認するのが、このクイズの狙いである。解答は記事の末尾に記した。 形態は機能に従う 「形態は機能に従う」という、米国の建築家であるルイス・サリヴァンの有名な言葉がある。何に使うものか、どう使うものかを徹底して考えるなかで、モノの形は決まってくる。 デザインは機能を制約するものではない。見た目で使いづらいということは、機能を十分に

これも出オチのような軽いネタですが。冷蔵庫の中で、すぐ古くなってしまうものの代名詞といえば卵と牛乳……と個人的に思っているのですが、古くなった牛乳を間違えて飲んでしまうことを防ぐデザインが紹介されていました： ■ Real Mature Milk Cartons (Yanko Design) 一目瞭然、時間の経過と共に、表面がチーズ（笑）のようになってしまうという牛乳パックです。もちろん牛乳パックの表面には賞味期限（消費期限？）が記載されているわけですが、小さい数字ですからうっかり見落としてしまうということもあるでしょう。また日付では、「今日が何月何日か」を意識して頭の中で計算しないと、あとどれくらいで消費しないといけないのかイメージがつかめません。その点、このデザインなら一目で分かる上に、砂時計のように時間経過・残り時間をつかめるわけですね。 問題はこんな塗料、実現できるのか否かという点

執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。 でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。 さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。 もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。 そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。 仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。 ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？ よく分か

先日のメールマガジン週刊はてなで ♪れいこん(id:reikon)のはてなピックアップ その169♪ 「女性向けのデザインが少ない！」「もっとお洒落にブログを飾りたい！」 はてなダイアリーのデザインについて、しばしばそんなご意見をいただきます。 どうやらトップページをはじめとするサイト全体の色合いがブルーが多く、 ちょっとコンサバなデザインであることも手伝って、女性の方は物足りない、 と思われることが多いみたいです。 週刊はてな バックナンバー と書かれていましたが、「はてなダイアリーには女性向けのデザインが少ない」とか、または「かわいいデザインが無い」という意見をよく見ることがあります。 しかし！ でも、でも・・それは大きな誤解です！ 週刊はてな バックナンバー と id:reikonさんも仰っているように、あんまり目に付かなかったり探し難かったりするかもかもしれませんが、はてなダイアリ

この記事へのトラックバック ウェブデザインにも、「黄金比」「白銀比」 Excerpt: 覚えておくと便利なバランスのよい縦横比とバナーサイズ :: Love & Design :: 黄金比や白銀比の縦横比や色々なバナーサイズの紹介。 美しいモノは��... Weblog: 日々、ウェブデザインとネットニュースとゲームとか。 Tracked: 2008-04-25 23:55 バランスのよい若草？ Excerpt: 縦横比……。 ずっと以前から、 タテとヨコの比率によって、美しく見える割合が研究されてきました。 覚えておくと便利なバランスのよい縦横比とバナーサイズ Love & Design 白銀比、.. Weblog: ウェブライター流転記（改訂版） Tracked: 2008-05-12 21:44 覚えておくと便利なバランスのよい縦横比とバナーサイズ :: Love & De

「こんにちわ、皆さんご機嫌いかがですか」 「3月21日から 公開デザイン祭2008春 が、始まっていますが、どうです？4月6日の締め切りに向けて制作は進んでいますか？」 「大賞はAmazonギフト券5万円分、と気になるものの、 『スタイルシートって難しいんじゃないか？』 と考えている人も多いかもしれませんね」 「でも、全然そんなことはありませんよ」 「今日は簡単に公開デザインを作る過程を紹介してみましょう、これを読んで皆さんも是非チャレンジしてくださいね」 「そもそも公開デザインとは何か？ついてはこちらを参考にしてください 他人のデザインをインポートする（公開デザイン一覧） - はてなダイアリーのヘルプ」 「はてなダイアリーに慣れない方が公開デザインを作るにあたって、最初につまづくのはどういう仕様なのか、分からないことでしょう。スタイルシートのことは分かっても、ダイアリーの構造までは把握し

もう3週間ほど経ってしまいましたが、先日行われた「ついったー新潟スイーツオフ会」 ついったー新潟スイーツオフ! - hknの日記 - はてなグループ::ついったー部 ついったー新潟スイーツオフのオフレポート! - hkn @ ついったー部 - はてなグループ::ついったー部 私はオフ会用の名刺を用意してなかったので、手描きの名刺を作ったのですが ついったー新潟スイーツオフ用の名刺 他にも作っていたので、今ごろですがこっそり紹介。 とりあえず、始めに4枚ほど。 2つが組のタイプ。 Twitter なのに初音ミク？というのは、初音ミクをプロフィール画像にしている方がいたので。 今使ってる公開デザインからパンダ。 Twitter なので「ついったん」を描いたのですが……、うーん、最近使い始めた方だとこのキャラを知らないかも？と描いてから気がつきました。 はてなちゃんで、ちゅるやさん風のローカルネ

相変わらず、1024x768のXGA環境のユーザーが約4割います。 見方を変えてみると、5割以上のユーザーが横幅1280px以上であるとも言えます。 ほとんどのユーザーが横幅1024px以上表示でき、半数以上のユーザーが1280px以上表示できるわけです。 2008年1月時点での最適なWebサイトの最大横幅 このことから、2008年1月時点での最適なWebサイトの最大横幅は、横幅1024pxのユーザーがストレス無く閲覧できる1000px以下になると言えます。 1024px限界まで使わないのは、ウィンドウ枠やスライダーバーの表示分を考慮しているためです。 余白なども考慮すると950px〜1000pxくらいが最適な最大横幅と言えるかもしれません。 Yahoo! JAPAN以外にも、ニコニコ動画やmixiなどのサイトも1000px近い横幅のデザインになっています。 ディスプレイ以外の要因 さらに

zdnetやcnetなどのサイトにおけるページネーションはウェブデザイン的に言えば最悪だ。ユーザーにいちいち次ページを見ることを強いることはニュースサイトの長年の慣例となっている。こうしたサイトは記事をバラバラに切り分けてページビューを増やすことに腐心しているけれども、パブリッシャーとして毎日コンスタントに10ページを見るけれども5分しかサイトに滞在しないユーザーと2時間じっと画面を見つめているが1ページビューしか生み出さないユーザーとどっちを選ぶべきだろうか。グーグルのSERP検索結果ページのページネーションも不便だが、firefoxでgreasemonkeyのユーザースクリプトGoogleAutoPagerやPagerizationを使えば1ページに次ページを次々読み込んでいくので前後ページを行き来することなく便利だ。サイト自身がウェブデザインを改善すると同時に、こうしたスクリプトがc