{{ngMeta['og:title']}}{{ngMeta.description}}
シンプルで上質なウェブデザインの国内サイトまとめ | 日刊ウェブログ式
白を中心としたシンプルで美しいデザインのウェブサイトをまとめました。日本語サイト中心なので、サイト制作の参考にしやすいかと思います。 Francfranc フランフラン コーキーズクッキー オンラインショップ recomincaリコミンカ 代官山 蔦屋書店 momochi soap Starbucks Coffee Japan SPIRAL WEB トリニティワークス アリンコ - ARINCO 株式会社キュービックホールディングス ヨイチの社長ブログ 面白法人カヤック Sゝゝ Online Shop 公長齋小菅 アトリエm4 au 東京女学館大学 日本デザインコミッティー 茶筒の開化堂 bathappy 約9,000種の紙が買える竹尾のウェブストアtakeopaper.com L'ALBAホールディングス 電通ワークス 博報堂（HAKUHODO） 株式会社 USEN マイナビ 目黒区美術
デキるデザイナーはみんな使ってる！背景にすぐ使えるすごいデザインテクニックのまとめ
画像や文字などを配置する時、背景をどのようにするかでデザインは劇的に変わります。 Webや紙のデザインに効果があり、すぐに使える背景のすごいデザインテクニックを紹介します。 Ultimate Guide to Designing With Backgrounds 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 背景のデザインとは ベタ一色の背景 高いコントラストのベタ一色の背景 テクスチャの背景 グラデーションの背景 写真をつかった背景 形をつかった背景 透明の背景 ブラーを適用した背景 カラーをオーバーレイさせた背景 文字のスペースがある背景 パターンの背景 イラストの背景 空白スペースをつかった背景 グリッドをつかった背景 背景のデザインとは 背景はグラフィックデザインを築く基礎となるものです。 テクスチャとカラーはデザインに奥行
Webデザインを上達させるために大切なこと。デザインが苦手なあなたや私へ。 - IT系女子ログ
Webデザイナーとして参加していた案件が炎上してしまい、デザイン業務をすることがとても怖くなってしまいました…。 そんなデザイン恐怖症を克服するため、デザインをもっともっと上達させよう！と決めました。 私の個人的な意見で恐縮ですが、同じようにデザインで悩める方が、デザインを前向きに捉えるきっかけのひとつにでもなれればと思い、自分なりに大切だと思うことを書き出しました。 関連記事 デザインは2年でどのくらい向上するものなのか。（ビジュアルはウソつかない） - IT系女子ログ Webデザイナー2年目を、まるっと棚卸し［デザイン編］ - IT系女子ログ デザインが仕上がらず炎上 デザインとはとても難しいのだと痛感 デザインを追求する、という覚悟を決める デザインと向き合い続ける 他責でなく自責で考える 制限があるから、デザインがより重要になる デザイナーが提案してもいい 良いデザインをたくさん知
7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手
改めて知っておきたい、一般的なWebサイトのレイアウト6種類を解説
この記事は2015年11月13日の記事を再編集しています。 Webデザインをする際に、ユーザーからみた見た目が美しいか、使いやすいデザインになっているかなど、気にかけたい点が多くあります。 普段から耳にすることがあっても、実際になにを指すか分からないという方も多いのではないでしょうか。 今回は、Webデザインを行う際に重要な、レイアウトについて解説します。 1.レスポンシブWebデザイン レスポンシブWebデザインとは、様々なデバイスに対して、単一のHTMLファイルで対応することができるデザインのことです。 通常、Webサイトをパソコンやタブレット、スマートフォンなど、複数のデバイスで表示させる際に、それぞれに対応したHTMLファイルやCSSファイルを用意して、HTTPリダイレクトなどを利用してアクセスが振り分けられます。 しかし、レスポンシブデザインを利用すると、作成したひとつのHTML
大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita
まとめノート風Webサイトを作ろうとしたきっかけ 本当はWeb制作本を執筆してみたかったのですが、資金等の関係もあり、Web上でブログ形式で書いていこうと考えました。そこで困ったのがWebサイトのデザインでした。最近では、ほとんどのブログでフラットデザインが使われていますね。Qiitaもその１つだと思います。フラットデザインとは、色に関していえば基本は白地や薄いグレー色で、その他1,2色をアクセント色としてデザインしているもののことですね。比較的簡単に作れて、かつ見やすいデザインなので重宝されていると思われます。 しかし、それではどこも同じような感じなので訪問者の頭に残りづらいと思うんです。そこで、思い出したのが今でもよく使っている大学ノート(ルーズリーフ)です。中学・高校時代はよく要点をまとめたまとめノートを作ったものです。ルーズリーフを使ったことがない人はいないと思うくらい、馴染み深い
アイデアに詰まったら！イケてる事例が見つかるWebデザインのギャラリーサイト38選
アイデアに詰まったら！イケてる事例が見つかるWebデザインのギャラリーサイト38選2022年2月8日 Webデザイナー Webデザインをしていると、アイデアに行き詰まってしまうことってありますよね。そんなときにギャラリーサイトを見てみると、インスピレーションが刺激されて行き詰った状況を打破できるかもしれません。 本記事では日本と海外の海外ギャラリーサイトを全38個まとめてご紹介したいと思います。日本と海外のギャラリーサイトをWebサイトとパーツ別にそれぞれ分けているので、4部構成でお送りします。 ＜この記事に関連する記事＞ アイデアが浮かばないときに参考にしたいブログ9選 スマホサイトのWebデザインに！参考にしたいまとめサイト9選 おしゃれなポートフォリオサイトのおすすめ20選！参考にしてかっこよく作ろう 目次 日本のギャラリーサイト（Webサイト） 日本のギャラリーサイト（パーツ別）
さりげなく使える、Webデザインの参考になるサイト集
作成：2016/04/11 更新：2016/06/29 Webデザイン > ありふれた当たり障り無いレイアウトではなくて、ほんの少しでも印象に残るレイアウトを作りたい。デザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 一部にグラデーションを使って視線をフックさせる 複数の色相を組み合わせたグラデーション。オーロラや紅葉など自然界によく見られる配色ですが、ページ全体に入れると少々キツく感じるときがあります。 そんなときは、上図のように色相差のあるグラデーションをワンポイントだけ使うことによって適度に視線をフックさせることができます。 INUPATHY こちらは被写体の気持ちを代弁するかのように、目立たせたい箇所にグラデーションが使われています。目立つけど、色ベタよりもキツイ感じはしません。 株式会社ジェイ・シー・エス
非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita
はじめに 普段はバックエンドエンジニアでデザインの勉強を一切やったことがない僕がそこそこのwebサイトであれば作れるようになってきたので、webサイトをおしゃれに作るためにやったことをまとめてみました。 手順 デザインについて無知でhtml, cssをほとんど書いたことない人（基本的な文法は知っている。）がいきなりおしゃれなサイトが作れるようにはなりません。以下のステップを踏んでいくといいと思います。 おしゃれなサイトを探して研究する。 bootstrapを使ってサイトを作ってみる。 実際に作ってみる。 おしゃれなサイトを探して研究する 個人的にこれをやることがおしゃれなwebサイトを作るための一番の近道だと思います。まずは既存のものを真似して作っていくことが大切だと思うので、なぜそのサイトがおしゃれなのか調べ尽くします。 この作業を繰り返しすることでどんなサイトがおしゃれなのかわかってき
Webにも紙にも使える、囲み枠デザインの基本テクニック
2016年1月20日 Webデザイン テキストを四角で囲ったシンプルな枠。もちろんWebだけでなく、印刷物でも多く使われていますよね。今回は、デザインをする上では欠かせないと言っても過言ではないこの囲み枠にフォーカスしてみようと思います。新米デザイナーさんや、デザイナーじゃないけど資料作成をする機会の多い営業さんの参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ 呼び方は「囲み枠」で正しいのか…謎ですが、テキストを囲んでいるボックスのことです。海外では「パネル」「テキストボックス」等と呼ばれています。 こんな時に使うと◎ 強調する時 「今なら20％オフ！」「期間限定！」等、注目して欲しい要素に利用されます。Webサイト上ではアラートメッセージでよくみかけますね。図はBootstrapのアラート要素。 要素の差別化 補足や注意書きなど、メインのコンテンツと区別して表示したい時
ウェブデザインの勉強に！サイトのトレースを爆速化するツール5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのみやです。 僕の地元では電車のドアは手で開閉します。襖のように左右に手で開けるのですが、未だにこの癖が残っていてたまに手を持っていかれます。 ところでデザイナーの皆さんは、どのようにウェブデザインを勉強していますか？ 僕は最近、ウェブサイトのトレースを始めました。 トレースとは、実際のウェブサイトをキャプチャしてその上から全く同じサイトを作っていく作業のことになります。 実際に手を動かしながらサイト構造やトンマナを学べるため、非常に効果的な勉強法です！ 今回はこのトレースを効率良くおこなうためのツールをご紹介します。 ウェブサイトの勉強で何をすればいいか分からない方や、なかなか時間が取れない方などにおすすめです！ Google Chrome拡張機能 サイトのキャプチャに便利な『Awesome Screenshot』 https://chrome.google.com
クリエイティブなデザインが簡単に制作できるフリーpsdレイアウト「20 Free Web Layout PSDs」
TOP > Design > クリエイティブなデザインが簡単に制作できるフリーpsdレイアウト「20 Free Web Layout PSDs」 webデザインを1から完成までつくり上げるのに、時間やコストをあまりかけることができない状況も、デザインの仕事をしていると経験することがあると思います。そんな時に活用できる、フリーpsdレイアウト「20 Free Web Layout PSDs」を今回は紹介します。 （Dribbble – Sevent WordPress + free psd by trendythemes） クリエイティブなデザインを簡単につくり上げることができる20種のpsdレイアウトが紹介されています。 詳しくは以下 ■Responsive PSD Template レスポンシブデザインのテンプレートpsdです。ベースがシンプルなので、希望のテイストのデザインにア
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pagan Cider
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ゴーストボタンと相性が良さそうなホバーエフェクト 10＋ - NxWorld
krafts-art.net [17]