1カラムレイアウトはもはや王道! Webサイトデザインの基本を解説 | Webデザイン、これからどうなるの？（全10回）
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
コピペで使えるオシャレな配色パターン見本 25 （全組み合わせWebカラーコード付） - LITERALLY
今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■
最近Webデザイン界で流行っている「Duotone」をうまく使えば超イケてるサイトに様変わりするに違いない - Brian'z Imagination
その昔アンディ・ウォーホルという巨匠が描いたマリリン・モンローのポップアートのレプリカが4年くらい前にマンションに飾ってあったのを思い出すけれど、最近Webデザイン界では海外を中心に「Duotoneデュオトーン」と呼ばれるデザインが流行りだしている。 シンプルでありながら、ポップでビビッドで非常に印象に残るデザインなので、「Duotone」を極めれば超イケてるサイトになりそうな予感。 最近流行っている「Duotone」って何ぞ？ 「Duotoneデュオトーン」は「Duo(2つの)」＋「tone(色)」をあわせた言葉で、ベースとなるミドルトーンとハイライトカラーの2色を中心に描き出されるハーフトーン作品のこと。Duotone作品自体は昔から存在するのだけれど、昔のアーティストが一生懸命に写真をつなぎあわせていた時代から時が経ち、Photoshopのアップデートで簡単に写真を加工してDuoto
FLAT ICON DESIGN -フラットアイコンデザイン- | WEBデザインやDTPですぐ使えるフラットアイコン素材がフリー（無料）ダウンロードできるサイト
フラットデザインに最適なフラットアイコン素材がフリー（無料）でダウンロードできる「FLAT ICON DESIGN」。 WEBデザインやDTP他、PPTなどでもすぐに使える商用利用可能なアイコン素材。利用規約はこちら ファイルのフラットデザインアイコン ノートのアイコン素材 あざらしのフラットアイコン 博士のフラットアイコン素材 はさみのフラットデザインアイコン ハンマー（とんかち）のフラットアイコン ドル袋のフラットアイコン素材 無料の暴れ牛のフラットアイコン素材 スペースシャトルのフラットデザインアイコン ギリシャのパルテノン神殿風のフラットアイコン 目玉のアイコン素材 にわとりのフラットアイコン素材 計算機のフラットアイコン素材 その2 コーヒーカップのフラットアイコン素材 バッファローのフラットアイコン 乳牛のフラットアイコン 海外の大学帽子のフラットアイコン おさるさんのフラット
スマホサイトをデザインするとき参考になるWebサイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 スマートフォンの普及率は2021年時点で80%*を超えており（総務省「情報通信白書令和３年度版」）、今やスマートフォンに対応したWebサイト制作は必須と言えます。 そこで今回は、スマートフォンサイトをデザインする際に参考になるギャラリーサイトや、スマートフォンサイトをデザインするときの注意点を紹介します。 海外のトレンドや人気のあるサイトをまとめてチェックできるので、ぜひ最後までご覧ください。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。 LIGが運営するWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」では、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ ぜひ一度詳細をチェ
WEBデザインが独学で身につく！WEBデザイナー必見の神サイト20選
2023年2月17日 Webデザイナー1年生はもちろん、Web製作に携わるものなら絶対に知っておきたい神サイトを完全収録しました。 独学でWebデザインを勉強したい人、優秀な先駆者たちの知恵を吸収し飛躍したい人は要チェック。 WEBデザイナー必見の神サイト20コリスWebクリエイターボックスコムテブログかちびと.netバンクーバーのうぇぶ屋ホームページを作る人のネタ帳creive【クリーブ】BlackFlagDesignDevelopArchAteitexe アテークゼウェビメモWebparkNxWorldデザイナーのイラストノート株式会社LIGMdN Design InteractiveドットインストールProgateschooコリス コリス サイト制作に関する最新の情報をご紹介 サイト構築、WordPressのTipsを得られます。ただし、Webデザイナー１年制が、今からの更新情報を受
しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
第1回 text-shadow実践テクニック | gihyo.jp
CSS3はブラウザの進化とともに昨今では様々なブログや技術系のメディアなどで取り上げられるようになってきました。 今回は、CSS3なのですがCSS2.1でもあったtext-shadowプロパティについてフォーカスします。 すでにプロパティの名前から何ができるかは予想がつきます。ただ、"そろそろ何ができるか"ではなく、"どのように使うか"という実践の部分に注目して紹介していきます。 text-shadowプロパティの記述方法 まずは、基本のtext-shadowプロパティの記述方法ですが、以下の形式で値を指定します。 セレクタ { text-shadow： ぼかし色 X方向への距離 Y方向への距離 ぼかしの距離 } ぼかし色 ぼかし色はRGB、色名にて指定が可能。#000はRGBの黒だが、blackでも指定することが可能。ぼかしの色は、text-shadowプロパティの値として一番最初に記述
独学で極める “Webデザイン”の技と心：第1回目 Webデザインの心～独学からWebデザイナーへの道のり｜gihyo.jp … 技術評論社
はじめまして。エスカフラーチェLLCのpurprinこと山田あかねです。 （株）paperboy&co.で Webデザイナーを勤めて昨年12月で退社後、今年1月にエスカフラーチェLLCの設立に携わり、現在はデザイナーとして主に社内のWebサービスの開発を行っています。 最近ではCSS Nite in Nagoya 2007で「極力ハックしない CSS」というテーマでスピーカーとしてお話させていただきました[1]。また、雑誌の記事を書くお仕事もしています。 この連載では「独学で極める Webデザインの技と心」というテーマで、前職で異業種だった私が独学でWebデザイン技術を習得したプロセスやノウハウなど、実体験を交えてお話させていただきます。 Webデザインの話となると、しばしば(X)HTMLやCSSなど技術の話がクローズアップされることが多いのですが、技術だけにとどまらず、実際に閲覧する
コーディングを考慮したWebデザインガイドライン
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less
コピペで使える！ CSSで凝った背景を作るサンプル集 | ライフハッカー・ジャパン
「CSS Gradients with background-blend-mode」はCSSの「background-blend-mode」を活用した背景サンプルをたくさん紹介しているサイトです。ウェブデザインをやっている方には非常に参考になるサンプルばかりです。 以下に使ってみた様子を載せておきます。 まずCSS Gradients with background-blend-modeにアクセスしましょう。 このように「background-blend-mode」を使ったサンプルが用意されています。CSSが表示されていますが、値を変更するとその場で適用された背景を閲覧できますよ。 サンプル集の下部には、実際に画像を使用した場合とのファイルサイズの違いが比較されています。CSSだけで実現するほうが圧倒的にファイルサイズが軽くなりますね。ウェブデザイナーの方はぜひ学習の参考に使ってみてくださ
刮目しよう、心惹かれるグラデーション in Webデザイン｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 昨日は私が住んでいる地域で光化学スモッグ注意報が発令されました。 もう10年以上同じ地域に住んでいますが、おそらく初めての経験で、この先の真夏がどうなるか心配です…。 さて、webデザインギャラリーなどで紹介されているwebサイトを見ていて、ふと心惹かれるものがありました。それは美しいグラデーションです。 グラデーションと言っても幅がありすぎるのですが、中でも複数の色（色相）を組み合わせたグラデーションが非常に美しく感じられました。 なかなか説明しづらいので、実際にいくつかご紹介させて頂きます。 美しいグラデーションを使ったwebサイト https://www.circle.com/ メインビジュアルに限って言うと、背景の写真もとても綺麗なのですが、このタイトルとボタンの、水色→紫のグラデーションが美しいです。あたかも背景写真の陽の光が届いているかのよう
センス上がった！タイプ別に分けたWebデザインの参考になるサイトまとめ
作成：2014/06/30 更新：2014/11/01 Webデザイン > サイトのデザインセンス、または操作性などが良いのか悪いのかわからない。 オシャレで洗練されたデザインにするため、少しでもセンスを上げるために色々なサイトをチェックしておきたい。 今回はただWebデザインギャラリーサイトを紹介するのではなく、ページ別・職種・動き・制作別など「サイト制作時に役立つ」くくりでまとめました。コーポレートサイトやECサイト・自社サービスのデザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 配色 １．グラデーション＋フラットデザイン ２．ダッシュボードの配色例 ３．高級感を出す配色 ページ別 ４．採用ページ ５．404ページ 職種別 ６．和菓子系（不足の美） ７．女性向け（エディトリアルデザイン） ８．医療系 ９
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
知らないと損！ウェブデザインに特化したPhotoshopの効率的な89の時短テクニック -神速 Photoshop Webデザイン編
Photoshopを毎日使うウェブ制作者はぜひ目を通してほしい、Photoshopを自分の手足のように使えるようにするノウハウ、同じ結果でも遙かに時間が短縮されるテクニックが満載のオススメ本を紹介します。 同サイズの画像をスライスするのに5分かかっていたのが1分で！ 10px以下の小さな文字を鮮明にするのに10分以上かかっていたのが5分でよりキレイに！ など実用的な技が満載です。 「神速 Photoshop Webデザイン編」ではウェブデザインの現場でPhotoshopを使う時に役立つ情報が満載！ Webデザインに特化したPhotoshopの環境設定方法から、すばやいスライス、効率的なカンプの作成、デザインのバリエーションを楽につくるなど、実践的なテクニックや便利なツール、そしていざという時の「直し」に強いデータをつくる方法など、デザイナーの時間を大幅に短縮します。 神速デザインの5箇条
Web制作者や、Web業界新入社員のためのベストエントリ48個 2013総まとめ
というわけで、今年も色々と読んでおくべきエントリーをまとめておきます。 正直読み返した上でリンクをぺたぺた貼っていったので、すんごい時間かかりましたけど、どいつもこいつも良記事でございます。読まずにいるとむしろ損する勢いでございます。 デザイン WEBデザインが短期間に上達した方法 | FEVDES BLOG 『これは、自分が新米デザイナーだった頃にやっていた、デザインの上達方法です。上手くデザインができない！上手くなるにはどうすればいいの？など、どうすればデザインが上達するのかわかならい人の参考になれば幸いです。』 たった1枚に込められたクリエイティブすぎる17個の広告 この記事の2億円、2人っていう広告がほんとうに色々な意味で印象的。 2013年の4大人気Webデザインのトレンド | Flips Blog Web担の小技 2013年のトレンド、今年のうちに。 50万件の投稿分析でわかっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.smaroomch.net/web-design-10/
MdN 2019年4月号
デザインってオモシロイ -MdN Design Interactive- TOP
