いまさらだけど、Webのイケてないところについて - Tortoise Shell
Webは面倒くさくて、本当にイケてない。 わたしはWebデザイナーとして働いているので、Webについての色々な事を当たり前だと思い込んで何の疑問も抱きませんでした。 しかし、冷静に考えてみると、おかしいことだらけだと思います。 Webデザイナーは、デザインするのが仕事です。 コンテンツの魅力を最大限にエンドユーザーに伝えるべく、情報をデザインしています。 つまり、Webデザイナーは「コンテンツの質を高めること」に注力しなければならないのです。 しかし、現状はどうでしょうか。 人間ではなく検索エンジンに優しいWebサイト 本来ならデザインに集中すべきなのに、なぜブラウザの差分に振り回されたり、SEOを気にしながらWebコンテンツを作らなければならないのでしょうか。 ブラウザもSEOも「手段」であるはずなのに、わたしたちはいつもその「手段」に振り回されています。 特に、SEOなんてひどい話だと
感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 | WebNAUT
「あなたは感覚派デザイナー？それとも理論派デザイナー？」 このような質問をされると、理論派デザイナーだと答えたくなる理系出身デザイナーのタカハマです、こんにちは。 今回は、そんな理屈っぽい私の大好物である「デザインの要素と原則」をご紹介したいと思います。理論派デザイナーの方はもちろん、感覚派デザイナーの方も知っておいて損はないですよ！ 「デザインの要素と原則」はビジュアルデザイン全般に活用できる Webデザインに限らず、ビジュアルデザインの基礎を学ぶ上で、大変参考になる「デザインの原則」というものがあります。いわゆる「Design elements and principles（デザインの要素と原則）」や「Gestalt principles（ゲシュタルト原則）と言われる原則で、デザインの構成要素や要素同士の関係性が全体に与える影響をまとめたものになります。 調べてみると識者によって分類や
ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略 - 情報建築家 石橋秀仁
本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作
「紙っぽいデザイン」の特徴を盗め！イベントポスター事例から学ぶ、紙っぽいデザインの特徴。
quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね！みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙（ポスター、雑誌）のような完成図をイメージされることが多いのではないのでしょうか。（特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ！） それで今回はＬＰやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
ゲーム系UIデザイナーの勉強を２年近くやって思った12のこと。 - meycoのUX&UIデザイン技術メモ
あけましておめでとうございます。 新年になり、すこしゆったりとした時間を過ごす事ができました。せっかくなので、去年からずっと思っていたUIデザイナーについて思った頭の中のことをまとめたいと思います。 WEBのUI設計よりも、明らかにゲームの方が難しい これは結構何度も言ってますが、ゲームの設計(ゲーミフィケーションのアプリ含む)の方が明らかに「やることが多い」です。 もっとプレイしてもらうには？ゲームが終わったときに、どのような設計になればもう一度やってくれる？ チュートリアルは必要？やりこみ要素はどうする？ソーシャルとどうやって連携する？ポイント加算の条件は？アクショナブルフィードバックは？日常で使ってくれるような設計には何が必要？盛り込みすぎではないか？ などなど、考えることが多いです。 このあたりは、ソーシャルゲームが本当に上手にできてるなーと思っているので、日々勉強しています。 ゲ
2014年のWebデザイントレンドと本当に必要とされるデザインと手法 | FICCナレッジブログ | FICC
去る6月25日（水）、竹橋マイナビルームにてマイナビ様が主催する「Creator’s Career Lounge（以下、CCL） vol.6」が開催され、FICCから戸塚、福岡、冨田、STANDARD社から鈴木 健一氏が登壇しました。「Webデザイントレンドの潮流」をテーマに、これまでのWebデザインが歩んだ歴史と背景、そして現在Webの現場で活躍するWebデザイン技法について、約2時間に渡った講演の内容を振り返ります。 スライド デザインには目的がある 大前提として、ここでお話しする「デザイン」とはただのスキンやその作り方だけの話ではありません。「買ってほしい」「知ってほしい」「シェアしてほしい」などの目的を達成するための手段がデザインなのです。目的が変わればデザインも変わります。そしてWebサイトを取り巻く環境の変化によって目的もまた変化してきました。 環境の変化、要求の変化、デザイン
フラットデザインに似合うボタンが、スライダーを調整するだけで作れるサイト「2.5dBUTTON」 | ライフハッカー・ジャパン
「2.5dBUTTON」はフラットデザインに似合うボタンが作れるサイトです。マウスを乗せるとポコッと立体的に浮き上がるボタンが作成できます。作ったボタンはHTML、CSSごとダウンロード可能です。 以下に使ってみた様子を載せておきます。まず、2.5dBUTTONへアクセスしましょう。 試しにボタンを作ってみました。このようにスライダーを調整するだけで色や形を決めることができます。マウスを乗せると上記のようにポコッと浮き上がります。 HTMLとCSSも自動的に出力されるので、あとはこれらをコピペすればOK。 こちらが実際に使っているときの様子です。YouTubeのロゴを作ったり汎用性が高いですね。ぜひフラットデザインのボタンを作成したいときにご活用ください。 2.5dBUTTON （カメきち）
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
Zen-Coding(Emmet)でコード展開時にクラス名・ID名のコメントを自動追加する方法
HTML Code / Sebastian Fuss 愛用のテキストエディタ「Sublime Text 2」にも導入しております、Emmet（Zen-Codingの次期バージョン）。使いこなすことでHTML、CSSの記述を高速化することが出来ます。 んまぁ例えばこんな風に記述して展開すると… このようにHTMLを吐き出してくれます。 で。MacのエディタCoda2のプラグイン「Tea for Coda」にてdiv要素を閉じた時に自動でコメントをつけてくれるカスタマイズみたいな感じでクラス名・ID名のコメントを自動的につけてくれる方法はないものかと調べていたところ、Web Design KOJIKA17さんの記事Zen-Coding、0.7のすすめ｜Web Design KOJIKA17に以下のような記述を発見。 フィルター HTMLの展開をサポートするフィルターも用意されています。 |(バ
「Webサイト改善は図を描きなさい！」 〜 SiteCatalyst達人から教わった分析フレームワーク-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
TOP > 「Webサイト改善は図を描きなさい！」 〜 SiteCatalyst達人から教わった分析フレームワーク こんにちは。マーケティング担当の伊藤大地です。 先日、米AdobeでWeb解析ツール「SiteCatalyst」のプロダクトマネージャープログラムマネージャー（初出時、役職を誤って表記しておりました。お詫びし、訂正いたします）を務めていらっしゃる清水誠さんが、一時帰国された折に弊社に遊びに来てくださいました。たっぷり2時間、最新Webマーケティング事情やWeb解析についてお話を伺いした中から、WebのKPI測定・改善サイクルとそのノウハウについて、エッセンスをお伝えしたいと思います。 清水さんが提唱されているWeb改善のフレームワーク「コンセプトダイアグラム」という手法は、主に3つのプロセスから成り立っています。 ユーザー視点でサイトを図解し、コンセプトを明確にする サイトの
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
怒涛のサイトナビゲーション総まとめ！事例、チュートリアル、参考サイト、僕の知る何もかもを紹介！ | バンクーバーのうぇぶ屋
レスポンシブデザイン、パララックススクローリング、そういったレイアウトに関する変化に伴い、サイト内を誘導するナビゲーションの種類も多様化してきていますね。 元々、縦、横、ドロップダウン、固定、メガメニュー等、サイトの構造によって様々なナビゲーションを提案してきたわけですが、最近サイトのレイアウトを考える時、話に上がるナビゲーションの呼び方とか、種類とか、大量多量過ぎてもう分け分けらなくなってきたので、ちょっと僕自身の復習と、参考サイトやらチュートリアルやらないかを全部まとめてしまいたかったので、僕と、僕の周りのデザイナーさん達の役にたてるよう、今回記事にさせてもらうことにしました！ 実際にWEB制作に携わる中で、聞いたことのある物を分類させて頂くので、僕の勝手な分け方になってしまい申し訳ない限りなんですが、何かナビゲーションやレイアウトに悩んだ時にでも参考か何かにしていただければ嬉しい限り
デフォルトが酷いとまじめに入力したくなる | コーヒーサーバは香炉である
codewallに登録してみたら、ちょっと面白い仕掛けがあった。プロフィールを何も入力していない状態だと、「スキル」の欄がこんな悲惨な内容になっている。 これは悲惨すぎる! ちゃんと編集しないといけない! もしもここに「まだ入力されていません」としか表示されていなかったら、あまり真面目にプロフィールを編集しようとは思わない人も多いだろう。後で気が向いたら書けばいいや、と。 しかし「ちゃんと記入しないと『IE6大好き☆ 特技はVBで〜す☆』ってことになるぞ」ってのは多くの人にとってはかなり嫌な脅迫となる。これはもう速攻で記入するしかないよ! 実際に何もしないと本当にIE大好きで特技はVBですと表示されるのかどうかは謎。おそらくはただの気の利いたジョーク……だと思う。 わかったのは、デフォルトが酷いものになっていると、「未入力です」と表示するよりもずっと強力に記入したい気分になるってこと。
クライアントに「とりあえず作ってみて。みてみないとわからないから」と言われた時のディレクターの返し方
先日、「とりあえず作ってみて。みてみないとわからないから」というつぶやきがTwitter上で話題になり、その一連の流れをまとめたtogetter上の記事が物議を醸した。 という事がありました。 「とりあえず作ってみて。みてみないとわからないから」つぶやきまとめ」 んで、この記事に対して僕がディレクターとして思ったことがあったり無かったりしましたので、ちょいと書いてみようかと思います。 ナカムラが思ったこと。 これってディレクターが前段階でもの申してやればなんとでもなることじゃね？ まず、クライアントの意見は全部入れるとだいたい見当違いのものができあがることが多いです。もうね、これは仕方ないと思う。だって企業の担当者はWEBの専門家では無い場合がほとんどなんだもの。 だから、どんなものができるのかイメージできない。 結果として「とりあえず作って見せてよ。お金出してるでしょ？」というスタンスに
UX/UIデザインガイドライン : 小野和俊のブログ
このところ、アプレッソの中でも、MIJS製品技術委員会でも、自分たちのソフトウェアのUX/UIをブラッシュアップしていくためにどんなことができるのかをディスカッションしている。 UX/UIデザインガイドラインとして各社の推奨する指針をまとめたものがWebで公開されているので、プログラマーであれデザイナーであれ、ソフトウェアの画面設計に何らかの形で携わるのであれば、基礎知識として主要なものには目を通し、プログラマーがデザインパターンの用語で手短にコミュニケーションが取れるのと同じように、「ここは○○ガイドラインの△△パターンを使うのはどうかな？」というような会話ができるようにしていきたいと思っている。 ■ Apple ・アップル ヒューマンインターフェースガイドライン ・iOSヒューマンインターフェースガイドライン(PDF) ・iPadヒューマンインターフェースガイドライン(PDF) ■ M
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
和文フリーフォントの最上位でしょ！グーグルとAdobeが作った「源の角ゴシック」をゲットすべし * prasm（プラズム）
Webデザインのセンスを磨く！2014年上半期洗練されたディテールのUIデザインのまとめ
UIデザインに行き詰ったときに見るとインスピレーションが得られるサービス