黒を使うな - モジログ
Ian Storm Taylor - Design Tip: Never Use Black (August 2012) http://ianstormtaylor.com/design-tip-never-use-black/ デザインでは黒を使うな、という話。筆者のIan Storm Taylorは、Segment.ioというサービスの共同創業者で、デザイナーでもあるようだ。 筆者は子供のとき、美術の教師から、黒には注意せよとアドバイスされた。その後、RISD（Rhode Island School of Design）でも似たようなことをたびたび言われたとのこと。 人間は、「暗いもの」を「黒」と結びつけてしまいやすい。しかし、ほんとうの「黒」というものは、実はめったにない。筆者はまず、Wayne Thiebaud（アメリカのポップアートの画家）の絵を例に、影が黒ではないことを示す。
クックパッド流UIの作り方 - takeshi nagayama's blog
なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を
「とりあえずUI直せば、どうにかなるんじゃないか病」になった話
「とりあえずUI直せば、どうにかなるんじゃないか病」が私の周りで流行している。もちろん私も何度となくかかっている。 この病気のはじまりは「目的を達成できないのはUIがいけてないせいだ！UIをとにかく今じゃない何かに変えれば問題は解決する」と思っちゃうことにある。 共通するのは、「とにかく今じゃだめなので、今じゃない何かにしたいからUI変えたい」という点。今じゃない何かにしたいのはわかるが、根拠が主観的すぎて成功する見込みがつかないのが困ったところ。 もちろん私も時にこの病気にかかり、ほんとにプロジェクトをすすめていいかどうか、どーしていいかわからず懊悩することも多々ある。というわけで、私なりに病気の定義と、自己治療法もなんとなく見つけたので、自省もこめて記録しておく。 「とりあえずUI直せばどうにかなるんじゃないか病」の主症状2点 根拠が主観的すぎて説得力がなく、社内を巻き込めない 本人が
かっこいいWEBは物が売れるのか｜More Access! More Fun
日本人の意地にかけてイギリスのダサイ病院のWEB見つけた。が、ダサイ程度では似たり寄ったりだがさすがに↑の中華思想みたいな色のは無かった。まあ、やる気の無い同士で比べても意味ないッス・・・ しかしこの人の「かっこいい」と挙げているサイトがFlashバリバリの時代遅れのものばかりで、どうも日本人とは感覚が違うのね、と思ったわけ。まとめサイトみたら同じこと言ってる人がいて感心した。 27番の投稿に完全同意です。 アメリカのサイトと日本のそれのデザインを比べても、日本のラップと本場のそれを比べて「日本語はダサイ」と言ってるのと大差なく、とにかく漢字自体がもともと横書きでは無くて縦書き用だし、WEBはもともと横書きの英語にあわせて作られているのでずるいわけです。 そもそも日本とアメリカでの価値観に大きな差があります。日本の官公庁なんて国民の誰１人も「クールにデザインして欲しい」って望んでないのでか
利用者の意図から探るサイトデザインの最適化
以前から文脈によってコンテンツ配信が活かされるという話はしてきました。テクノロジーを活かすことで、適確な文脈を読み取ってコンテンツ配信が可能になるのではないかという提案をしてきたわけですが、デザインプロセスとしてコンテキストを考えることが重要になることもあります。今回は企業の製品ページに注目して、文脈とコンテンツ配信がどう結びついているのかを検証していきます。 このように製品ページに HTML版と Flash版と 2つ用意されていることがあります。 同じ AQUOS PHONE の紹介ページですが、ソーシャルメディアで共有されている数から予測すると、アクセス数は HTML ページのほうがはるかに高いと思います。また、購入・お問い合わせまでの導線も明確なので、コンバージョンにも違いがあると予測されます。製品についてもっと知りたいというニーズに応えるのであれば、自己アピールの要素が強いプロモー
Webでの文字のレイアウトについて - 2011年に試してみたこと - - くらげだらけ
2011年の後半あたりから文字や文字組に興味を持ち始めました。元々、大学時代に文字についての勉強をちゃんとできていなかったことが、ある種のコンプレックスのように感じていました（今もそうです）。そのうえで「デザイナー」という肩書きを持っていることを嫌って、名刺にデザイナーではなく「制作」とわざわざ入れたこともありました。 そんなこんなで過ごしながら今年読んだ本が「文字をつくる―9人の書体デザイナー」と「文字講座」という本でした。どちらの本にも文字がどんなふうにできたのか、どんな想いでできたのかといったことが書かれていて、非常に面白かったです。それから書体や文字組に関する本を読んだりして少しずつですが勉強している毎日です。 最近では電子書籍が少しずつ読めるようになって来ました。私もiPhoneで読んだり、iPadで読んでみたりしています。私もWebに関する仕事をしているので、最近ではWebの文
配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう！｜Webpark
自分が作ったウェブサイトを見て、「センスないな」とへこむことはありませんか？ 私はよくあります。色使い、レイアウト、写真、文章などなど、どれをとってもセンスないなとへこんでいました。 けど、センスがないのではなく、単に基礎を勉強していないだけということに最近気づきました。センスはもっと高い次元の話でした。 ということで、センスを言い訳にしてしまいがちな分野の基礎を学べるすばらしい記事を集めました。この記事自体単なるまとめ記事ですが、できるだけ厳選し、読んでほしい順に並べました。皆さん、あきらめずに一緒に勉強しましょう。 配色 アクセントになる色を使うのが苦手で、同色系の色ばかり使ってしまうのですが、これらを読めば恐れずに使えそう。 色彩センスのいらない配色講座 ベースカラー、メインカラー、アクセントカラーに分類してどのような色を選ぶべきか分かりやすく解説してくれています。具体例もあって分か
これからWebデザインの勉強を始めたい方のためのまとめ
これからWebデザインやコーディングの勉強を始めたい方、またはWebデザイナーになったばかりの方向けのまとめ記事です。 「無料で始められる…」とか「本を買わなくても…」などのテーマにしようか迷ったのですが、無料ではじめられる記事としては、既にネタ帳さんの以下のようなエントリ↓がありますので、ここでは純粋に私がおすすめしたい記事、本、サイト、ソフトなどを有料無料に関係なく紹介したいと思います。 Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳 デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）*ホームページを作る人のネタ帳 あと、渋谷でWebデザインスクールを開講しています。 詳しくはこちらの記事 をご覧下さい。 デザイン基礎 年末年始にWebデザインを学び直すための3つのステップ いきなり手前味噌で申し訳ないですが、これからWebデ
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
WEBデザイナーを目指す人へお勧めしたい記事・サイトまとめ ｜https://wp.yat-net.com/name
最近僕の周りでWEBデザインの勉強やコーディングの勉強を始める人が多く、そんな方々向けに読んで欲しい、見て欲しいサイトをまとめる機会があったのでブログにポストします。 ブログに置いておけばこれから先また誰かに伝える機会があってもURL一つで教えれるので便利ですよね。 Index 1.WEBデザイン全般 2.色彩・配色 3.レイアウト 4.ユーザビリティ 5.文字・文章 6.フォント 7.コーディング 8.著作権 9.グラフィックツール関係 10.チュートリアル等 1.WEBデザイン全般 [連載]Webデザイン入門（1日目）：Stocker.jp [連載]Webデザイン入門（2:スケッチしよう）：Stocker.jp [連載]Webデザイン入門（3:光とボタン）：Stocker.jp サンプルデザインでわかりやすく見る。プロデザイナーが使うセオリー10のこと。：MAKA-VELI.COM W
Q&A: 日本語サイトで英語を多用しているのはどう考えていますか？
社会にあるあらゆるデザインについて言えますが、日本語だけで表現できるものにあえて英語を使ったり、アクセントとして英語を使うことがあります。 英語を使うことがかっこいいという理由だけなのでしょうか？ from: Naoyoshi Suzuki 留学１年して帰国した後、唖然としたのが英語表現がおかしい T シャツを着ている人が多かったこと。自分もおかしな英語が記載されたシャツやグッズをもっていたわけですが、少し英語が理解し始めると妙に思える場合がありますね。海外でもおかしな日本語のシャツを着たりタトゥーにしている人はいるので、日本だけの現象ということではありません。 Webサイトデザインでも英語をデザインの一部として利用しているケースが幾つかみられます。英語のラベルをヘッダーやメニューに入れるケースをよく見かけますが、英語をわざわざ使うのも幾つか理由があります。 装飾としての英語 文字が意味を
効果的なミニマルデザインと退屈なデザインの境界線
2013年3月23日 Webデザイン, インスピレーション ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ミニマルデザインとは そもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいの
実践して結果を出す、コピーライティングの技法 | Webコンサルティング
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
[連載]Webデザイン入門（1日目） | Stocker.jp / diary
本日から新たに、「Webデザイン入門」というタイトルで連載を始めます。 9月からWebスクールの講師をさせていただいているのですが、そこでカリキュラムとして渡されたテキストには「Photoshop や Dreamweaver 等のソフトの操作説明」しかされておらず、ソフトの操作方法を習得しただけではWebデザイナーとして就職し、仕事していくのは少々厳しいのではないかと思いました。 そこで、ソフトの操作方法と平行して「Webデザインそのもの」について考える時間を設けたいと思い、オリジナルのカリキュラムを作ることにしました。 ここでは、そのカリキュラムの一部をブログ形式にして掲載しています。 既にWebデザインの仕事をされている方はご存知のことばかりかもしれませんが、これからWebデザイナーになりたい方や、今はプログラミングなどデザイン以外の仕事をされていて、これからデザインも手がけてみたいと
![[連載]Webデザイン入門（1日目） | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/8aeba51f4329633993f3f50c3007e124fe9a30ab/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Fb433d63ba5e7a465dbac23082f36bb7f-500x375-1.png%3Ffit%3D500%252C375%26ssl%3D1)
ホワイトスペース使ったウェブデザインの考え方
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか？ どんなふうに感じましたか？ この例では、Bのほうに大きな余白を与えました。 ４隅すべて同じぐらい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
layer8.sh
ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ
スマートフォンサイト制作時にデザイン・UIの参考になるサイト集 – creamu