本当は教えたくないWebデザイン参考ギャラリーサイト37選
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
新しいデザインの教科書
【ご挨拶】 / 【目次】 / settings / 解釈が変わる写真 / ラインスケッチ / 感覚の変換による観察 / 蓋の分類 / 新しい分け方の基準 / バランスによる新しい価値 / 約束事を共有することで、読みとけるようになる四コマ漫画 / 丸を取り出す / ｷﾘﾄﾘﾑｼ / レイアウトが解釈を生み出す / モノをコントロールするための身体言語 / space / 「解釈が変わる写真」野中大
[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン｜金 成奎
[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン ウェブデザイナーが作った成果物に対して、満足はしていないのだけどうまく言語化できなくてどうやって指示したらいいか分からない、あるいはクライアントからのフィードバックをどう咀嚼して伝えていいか分からない、結果的にデザイナーを上手くディレクションできていない.......。そんなお悩みをもったウェブディレクターいませんか？ ここでは実際のデザインを見た時に感じること・あるいはクライアントが指摘しがちなことについての「あるある」を、15の事例に集約してまとめてみました。デザイナーとコミュニケーションしてデザインをブラッシュアップする上での、ある種のアートディレクションの手引きとして活用してもらえればと思います。 1.「野暮ったい」と感じたら・言われたら。 「野暮ったい」とは
![[デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる！アートディレクション15の定番パターン｜金 成奎](https://cdn-ak-scissors.b.st-hatena.com/image/square/0aa50796295af9d9e533b4f2f4683522dbc45cd4/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F13031716%2Frectangle_large_type_2_0cfda3162d1aa8bb9571cecf5ec1f1e0.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
便利かも！iPhoneなどのモックアップがオンラインで使えるshotsnap | SONICMOOV LAB
iPhoneやAndroidなどの端末画像にPhotoshopでデザインしたスマホの画面やキャプチャ画面をはめ込んでデザインに活かせるモックアップですが、ネット上で検索すれば無料でPSDデータとして探すことができます。 ただ、Photoshopを持っていない人にはそれは使えないものだったり、Photoshopの知識がないと使えなかったりします。そこでもっと手軽に使えるshotsnapの紹介です。 関連記事 便利すぎ！Android、Surface等のあらゆるモックアップがあるFacebook Design Devices iPhoneだけじゃない！様々な素材がモックアップとして使えるMockupWorld shotsnapとは？ shotsnapは、Gaddafi Rusli氏によるオンラインで無料で利用できるモックアップ作成サービスです。 iPhone（SE、8、X）やGalaxy S8
UXデザインとUIデザインの３つの大きな違い
Alan Smith氏は、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 UXとUIの定義についての論争は、その２つの言葉が現れて以来ずっと続いています。UXはUser Experience（ユーザー体験）、UIはUser Interface（ユーザーインターフェイス）を表しています。 さっぱりわからないですか？ これを理解できる瞬間はおそらくこないでしょう。エンドユーザーへのインターフェイスがユーザー体験に対してどのように影響を与えるかわかるでしょうか？ また、UXとUIという言葉が同じ時期に作られたものでないという事実も、この２つをとりまく混乱の原因のひとつであることは間違いないでしょう。UXとUIは、同時期に考え出された言葉ではなく、当初は明確に定義され
Webデザイナーに愛を込めて。ディレクターが意識すべき７つのポイント | LPO研究所
LPO研究所所長の鎌田です。 先日、弊社デザイナーが「新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法」という記事を書きました。 この記事は公開2日で1万人以上もの方にお読みいただきまして、本当にありがたい限りなのですが、そのなかで 「指示を出すディレクターにも問題があるのでは？」 というご意見を同時に多数いただきました。 皆さんの仰るとおりでして、「売れるWebデザイン」というのは、デザイナーとディレクターの真剣勝負によってのみ生まれます。どちらか一方が依存している状態、考えていない状態では、ターゲットの心を掴むデザインを作ることはできません。 では、「売れるデザイン」をWebデザイナーに作ってもらうために、ディレクターは具体的にどう動けば良いのでしょうか？ 実はデザインディレクションにも、誰でもカンタンにマネできる「ちょっとしたコツ」があります。 今回は「デ
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
デザイナーはワイヤーの通りにデザインすべきかという議論は虚しいのでやめよう - デザイナーのイラストノート
先日、7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法という記事が話題になりました。これに端を発して「そもそもデザイナーはワイヤーどおりデザインを作るべきか」という話題があちこちで見かけられました。（件の記事は、デザイナーを経験されたアートディレクターならではの「デザイナーがワイヤーの枠を出られない理由」が書かれていてとてもいい記事です、ぜひご一読を。） ワイヤーどおりに作るべき？ 言うまでもなく、みなさんご存知の通り、「案件による」。以上です。 しかし、実際ディレクターのお悩みとして「デザイナーから上がってきたものがワイヤーの通りだった」という声はあります。しかしこれは結局のところ と思いますがいかがでしょうか。 と言うのにも一応理由があって「ディレクターにワイヤーの通りだと怒られた」という話はあまり聞かないからです。デザイナー側はそのことをあまり問題視していな
シニア層を対象にしたスマートフォンサイトのユーザビリティ
2016年8月14日 UXデザイン, Webデザイン, スマートフォン 私の母は某アーティストの大ファン。20年以上ファンクラブにも入り続けている熱狂っぷりです。過去記事「シニア層のためのWebサイトユーザビリティ」では、そのアーティストのグッズを購入しようと奮闘していた母ですが、今度は別の目的でスマートフォン版のそのサイトを操作したみたいです。今回は私がそれを横目に見ていて感じたことを書いてみます。 ↑私が10年以上利用している会計ソフト！ ライブチケットの当選確認をしたかった母 ここ数年はMacを触る機会もほとんどなくなり、スマートフォンでWebサイトの閲覧をしている母。そして秋に行われる某アーティストのツアーのチケットに応募しており、その当選発表があったので確認がしたかったようです。 それを聞いて「私がやるよ〜」と申し出たものの、娘に頼ってはいけない！という母の思いからか、何度手伝う
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
【境界が無くなる】デザイナーとエンジニアの仕事内容 デザイン会社 ビートラックス: ブログ
アメリカ、特にサンフランシスコ周辺の会社を見てみると、エンジニアに加えてデザイナーの需要が高まっている。これは見た目やUXが優れたプロダクトへの人気が上がっており、企業としてもよりユーザー目線で使いやすくニーズにあった製品を作る為に、企画段階からデザイナーを参加させる事が増えていているからであろう。 それに伴いデザイナーの役割が、これまでの”見た目を美しくする”事から”ユーザー視点で最適な問題解決方法を見つけ出す”へと広がりを見せている。 このビジネスに対するデザインの重要性の高まり-デザインシフト-でデザイナーやエンジニアに求められるその役割と仕事の範囲に変化がおき始めている。恐らく10年程前と比べてみると、それぞれの仕事の範囲が多種多様に広がっているのに加えて、オーバーラップする領域も増えているだろう。 デザインの未来を示す15の変化で下記のような項目があった。 “デザイナーとエンジニ
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
デザイナーやコーダーがいなくても、BootstrapベースのかっこいいWebページが驚くほど簡単に作成できてしまう -Assembly | コリス
デザインやHTML, CSSの知識は不要。Bootstrap 3ベースのかっこいい縦長ページや複数ページのサイトが簡単に作成でき、デザイナーやコーダーがいなくても、そしてデザインやコードが分かる人には今までの作業がぐっと楽になるオンラインサービスを紹介します。 サンプルを元にカスタマイズしてもよし、ヘッダやコンテンツなど100種類以上のコンポーネントからクリック一つでぽんぽんページのレイアウトが完成してしまいます。 Assembly Assemblyは無料で利用でき、一部のコンポーネントとHTML化が有料（$17）です。 $17は2016年2月現在、1,900円なので、フル機能でこの値段は有りですね。 まずは、Assemblyでどんなページができるか見てみましょう。 縦長スクロールのページで、ヘッダは大きい写真画像、コンテンツが数パターンあり、フッタがデザインされています。コマ数を落として
品質アップの時間を確保するデザインの進め方について - クックパッド開発者ブログ
こんにちは。ユーザーファースト推進室、デザイナーの坂本です。 私は、クックパッドのレシピを主に生活習慣病の方に向けて管理栄養士が健康的にアレンジした「おいしい健康」というサービスのデザインを担当しています。 「おいしい健康」は2月22日に、アカウント（会員）機能やレシピのリコメンド機能、献立の保存機能などの新機能をリリースしました。このリリースに関わったメンバーは、ディレクター1名、エンジニア3名（＋アルバイトの方2名）、デザイナー1名です。 私はデザイナーとして、UI設計からビジュアルデザインまで関わったのですが、パターンの考慮漏れや使い勝手の悪さなどで、手戻りを増やしてしまいました。 リリースした今、改めて振り返ってみると、もう少しうまくやれば手戻りを少なくし、品質アップの時間をもっと確保できたのでは？と思いました。一体何が悪かったのか？ どうすれば良かったのか？ もし神様が願いを叶え
きみはバルミューダほどシズるWebを設計できるか
いま「ほぼ日」に連載中の寺尾玄さん対談がすごく面白くて、にわかにバルミューダの大ファンになっています。それで“BALMUDA The TOASTER” の公式Webサイトを見てみたら、すばらしく練られたWebデザインとコンテンツが用意されている…！ この記事では制作者の視点から、バルミューダのWebがどのように製品の価値を表現し伝えているか、そのユニークさを（勝手に）紐解きます。 前段：バルミューダのこと 寺尾玄さん率いるバルミューダ株式会社は、2003年設立で東京・武蔵境に拠点を置く、50人のベンチャー企業。2010年、扇風機「GreenFan」のヒットで名を上げ、2015年にリリースしたスチームトースター「BALMUDA The Toaster」は引く手あまたの人気で、同年のグッドデザイン賞金賞を受賞するなど高い評価を受けました。 「高級デザイン家電メーカー」のような見え方でいて、その
それなりに使える、Web制作者がお世話になる便利ツール
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
まだ使っていない方にはオススメしたい。Sketchって結局どんな感じなのよ？と思ったので試してみたよ。
こんにちは！霙(@xxmiz0rexx)です！ 2015年ももう終わろうとしている時に、遅ればせながらやっとデザインツールにSketchを導入してみました。 まだインストールして1週間ほどなんですが、入れて良かったという感想しかないです…。爆速で仕事が終わっていくやんけ、、、。そんなわけで今年最後の記事は、今年最後に手に入れたデザインツール『Sketch』をご紹介させてもらおうと思います。もしアプリをデザインする人でまだ使っていない人がいたら参考にしてみてください。Webデザインにも使えますが、やはりアプリデザインにこそ真価を発揮すると思います。 目次 Sketchを使って感動したこと 取り急ぎ入れたSketchプラグイン 気になっているプラグイン（未使用） これだけは覚えておきたいSketchのショートカットキー さいごに Sketchを使って感動したこと まだ使っていない人からしたら、
デザインの確かな知識が身につく！Webサイトやアプリのデザインの勉強になるスライドのまとめ
実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンテンツ配信｜株式会社エンタミナ
