良質なWebデザインを集めているギャラリーサイト18+1選Update2023.03.07Release2022.10.17DesignUIHatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録するWeb制作の現場では、制作側はクリエイティブの参考に、クライアントは要望を伝えやすいように、Webデザインギャラリーサイトを利用する機会は多いです。そこで今回は、良質なWebデザインを集めているギャラリー18+1サイトを紹介します。あなたの現場でぜひ参考にしてみてください。 ちょうどいいWebデザインギャラリーちょうどいいWebデザインギャラリー限られた条件の中で、最良のクリエイティブを『ちょうどいい』と定義して、キュレーターがそれぞれのWebサイトのちょうどいいポイントを端的に紹介していている『ちょうどいいWebデザインギャラリー』。 サイトをス

noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック(経験)ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です(現時点では個人の見解です)。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか?デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも

Photo by Marcy Leigh こんにちは。谷口です。 現在、Webデザイナーとして働いている皆様はどんな書籍を読んでいますか? 最近は、基礎的なデザインの勉強をしてきた方だけでなく、もともとITエンジニアとしてWebサービスの開発をする中で、Webデザインもすることになったという方も多くいらっしゃるかと思います。 今回は、Webデザインの仕事をしている方々が、デザインをするに当たってジャンルごとに役立つ書籍を17冊ご紹介いたします。 目次 ・IA、UI、UX ・レイアウト ・配色 ・HTML/CSS ・CMS組込み ・デザイン技法 ■IA、UI、UX ◆1.IAシンキングWeb制作者・担当者のためのIA思考術 IAシンキングWeb制作者・担当者のためのIA思考術 作者: 坂本貴史,宮崎綾子,長谷川恭久出版社/メーカー: ワークスコーポレーション発売日: 2011/03/29

Webデザインの勉強には、良いサイトをたくさん観るということが重要です。学生用にWebデザインギャラリーのリンクを書き溜めていたのですが、改めて確認すると閉鎖されているサイトもいくつかありましたので、整理して公開しようと思います。 有名なところは網羅してあると思いますが「ココが無いぞ!」ということであれば、教えてください。 【国内】 MUUUUU.ORG http://muuuuu.org/ ズロック http://www.zzrock.net/ 4dd http://4db.cc/ S5-Style http://bm.s5-style.com/ 81-web.com http://81-web.com straightline bookmark http://bm.straightline.jp/ AnotherBookmark™ http://www.anotherbookmark.

お疲れさまです、デザイナーのモモコです。 つい先日大雪が降ったと思えば、もう春一番が吹いたと聞いて、時間の流れは早いなとしみじみしています……まだこたつを仕舞いたくない! さて、今回はスタイリッシュで使いやすいUI制作の参考になるサイトを6つご紹介します。 スタイリッシュで使いやすいUI制作の参考になる4つのサイト UYI https://useyourinterface.com/ ※現在はサービスを終了しています。 インタラクティブなUIを集めたtumblrページ。左メニューのArchiveから今まで投稿されたものを一覧で見る事が出来ます。 サムネイルにGIFアニメを使用しており、実際の動きを確認しながら見られるのが良いですね。 UNHEAP https://www.unheap.com/ 綺麗で実用的なUIが作成できるjQueryプラグインを多数紹介しているサイト。 フラットデザインで

私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 (メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています) (引用:Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9) 私の場合、メリハリをつけるのは以下7つの方法が多いです。

ウェブディレクターとしても、ブロガーとしても、ここ最近「レスポンシブウェブデザイン」という単語を頻繁に見聞きするようになりました。はてなブックマーク界隈でも人気のキーワードとなっています。 また、ブロガー仲間の@otaman517さんや@kouseipapaさんも、最近ブログテーマをレスポンシブウェブデザインに変えたようです。 これでiPhoneからでも見やすくなったはず!レスポンシブテーマ、Originに変更しました ブログデザインを変更。レスポンシブ対応のテーマを適用しました。 かく言う私のこのブログも、実はレスポンシブウェブデザインで作られています。 じゃあ、そもそもレスポンシブウェブデザインってなんなのか?。何故、そこまで重要視されているのか。これについてお話ししていきましょう。 レスポンシブウェブデザインとは? とてもカンタンに言えば、「すべてのデバイスに対して適切な見え方をする

先日、ブログのリニューアルに伴いまして当サイトの「ロゴ」を作成してみたわけなんです。 ↑こんなん。 で、こちらのロゴ私も大変気に入っておりまして、ありがたくも「かっこいい!」「抱いて!」というお声を頂戴したりしなかったり。 そんななか、「あのロゴはどうやって作成したのですか?」「手順を晒してください」「私も全てを晒します…//」と言ったご意見を何名かの方から頂きましたので、「Illustrator初心者のためのロゴ作成講座」と銘打ちましてどんな手順であのロゴができ上がったのかをチュートリアルにまとめてみました。 なんとも大上段に構えたタイトルですが、これからIllustratorを学ぶ方にはちょうどいい感じの内容になっておるかと存じますので大目に見てください;)そしてすんげーーーーー長いですがこちらもご勘弁ください。 新規書類を作成 では早速Illustratorを開いて、新規書類を作成し

ナビゲーションが分かりにくい ナビゲートすることが難しいサイトは、ユーザーを失望させます。複雑だったり、一貫してなかったり、そういったナビゲーションはユーザーを困惑させ、苛立ちを感じさせるものです。
Buy thisdomain. 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor thedomain owner maintain any relationship with the advertisers. In case of trademark issues please contact thedomain owner directly (contact information can be found in whois).Privacy Policy
レスポンシブ・ウェブデザイン -Responsi... / レスポンシブ・ウェブデザイン基礎 / ADC OnAir 第5回 『レスポンシブ We...他...全6件

今回から3回にわたり、ECサイトの色選びについて学んでいきましょう。ECサイトにおいては、何よりも重要なのはその商品を売ることです。そのためには正しい色を使って、伝えたい情報を確実に伝達させ、機会損失を減らす必要があります。 自社の商品を販売しているのでなければ、多くの商品は競合サイトでも販売されているはずです。単にサイトのデザインや配色がよいだけで売れるわけでないことは、実際にECサイトを制作・運用したことのある人であれば、既に理解されていることでしょう。 では美しい色彩が必要ないかと言われるとそうではありません。美しいかどうかは主観によりますが、その商材を販売するのに適した配色である必要があります。また訪問者にサイトを印象づけることで、再訪しやすくすることも重要ですし、ユーザビリティに配慮してストレスを感じさせることなく購入してもらうための流れを作る必要もあります。 例は同じ写真を利用

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の

以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの?」という質問をよく頂いていました。私がWeb制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなったWeb制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 WebサイトはHTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近ではHTML5 とかCSS3 とか、私が勉強し出した頃に比べる
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く