designに関するttrttrのブックマーク (10)

  • 一貫したデザインのためにデザインシステムを運用する方法

    BenはUXPinのコンテンツ戦略担当者です。 Webウェブデザイナーとバックエンド開発者の両方として働いています。 人は馴染みがあるものを信頼します。そのことを知っている多くのデザイナーは、作品をできるだけシンプルにするよう努めています。また、シンプルなデザインは実用的でもあります。たとえば、一度ナビゲーションバーをデザインすれば、すべてのページで使うことができます。 しかし、デザインコンセプトはどんどん変化します。新しいアイデアを持つデザイナーが古いプロジェクトを引き継いだり、新しいコーディング手法が昨年の最先端に取って代わったりすることもあるでしょう。その結果、一貫性のないビジュアルとコードの寄せ集めになってしまいやがて問題となります。 デザインの一貫性とは デザインの一貫性がある製品は、変更を加えても見た目や動作が全体としてまとまりがあるように見えます。これは、特に大規模なサイトで

    一貫したデザインのためにデザインシステムを運用する方法
  • Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

    実は、bootstrapの知識だけでは足りません(涙) 気でweb制作仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか? 便利ですよね。その便利さを物語るように、当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て

    Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
    ttrttr
    ttrttr 2017/06/15
    すごくわかりやすく可視化されていて助かる…!
  • The Blog | Welcome to Adobe Blog

    The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

    The Blog | Welcome to Adobe Blog
  • “モバイルファースト”とはスマホサイトを最初に作ること? 本来の意味を正しく理解すべし! | 生田昌弘の「Web担当者に喝!」

    「モバイルファースト」という言葉を耳にするようになって久しいが、やっとその必要性や重要度が認知されるようになった。 皮肉にもフィーチャーフォン(ガラケー)が廃れて、スマートフォンの台頭がその引き金になった。だから、トレンドワードとしては「コンテンツファースト」とするほうが実態にそぐわしい。 SEO業界では、外部リンクSEOからコンテンツSEOにトレンドが大きく変化しようとしている。 実は、これこそが「モバイルファースト」で成し得なければならない施策なのだ。 モバイルファーストとは、「スマートフォン向けのサイトから先に作る」という作業手順の話ではない。 ユーザーのニーズや状況(スマートフォンからのアクセスもその1つ)に合わせて、必要なコンテンツを必要なテンプレートに表示する。そのためには、ユーザー視点で、ユーザーの導線やシチュエーションごとにコンテンツを考えなければならない。これがWebサイ

    “モバイルファースト”とはスマホサイトを最初に作ること? 本来の意味を正しく理解すべし! | 生田昌弘の「Web担当者に喝!」
  • Webデザインにおける写真のトレンド6選

    高画質なスクリーンが一般的になったことで、視覚的なメディアとして発展するWebデザインにおける、写真の役割が大きくなっています。美しい写真の使用は、不変のテクニックです。 この記事では、Webサイトでの写真においてもっとも人気のある6つのトレンドを紹介します。 目を引くヒーローイメージ スクロール画像上の全面を占めるヒーローイメージは、Webデザインにおいて、もっとも人気の高いトレンドの1つです。 ヒーローイメージの価値は、瞬時にユーザーを夢中にさせることです。 人間にとって、視覚はもっとも強い感覚です。そのため、高画質なヒーローイメージは、もっとも速くユーザーの関心を引く方法の1つになります。 ヒーローイメージにより、ユーザーはすぐに引き込まれ、そのサイトへ期待を持ちます。

    Webデザインにおける写真のトレンド6選
  • 【商用無料】フリー画像おすすめサイト50選 完全ガイド2024年版

    「無料で使えるフリー画像を見つけたい」という話は、ホームページやグラフィックなどクリエイティブな業種では、よく耳にします。 しかし同時に、「目的の一枚が見つからず時間だけが過ぎてしまった」なんて経験がある人も多いのが事実です。 フリー画像を効率的に探しコツは、目的や用途にあったサイトで素材を見つけること。 この記事では、商用利用できるフリー画像サイトを国内・海外に分けて一挙にご紹介します。 利用者の多い定番サイトから、あまり知られていないレアなサイトまで集めています。 8年前の2016年12月7日に公開した記事を、最新版にアップグレードしてお届けです。 国内フリー写真素材サイト ここでは、商用利用できてクレジット表記も必要ない「フリー画像」を無料ダウンロードできるサイトをご紹介。 ここでの選定ポイントは、以下の通り。 日人や日の伝統、和柄など国内向けの画像素材が豊富 日語によるキーワ

    【商用無料】フリー画像おすすめサイト50選 完全ガイド2024年版
  • 文字テキストとイメージ写真の上手な組み合わせ!5つのシンプルな方法まとめ

    海外デザインブログCanva Design School Blogで公開された「How to Marry Text and Images – Canva Design School” href=”」の著者より許可をもらい、日語抄訳しています。 文字テキストとイメージ写真を組み合わせる、効果的な5つのテクニックを利用することで、見た目の構図を美しく、そして読みやすくすることができます。ちょっとした工夫をすることで、あなたのデザインをより魅了的に仕上げてくれます。 写真の空いているスペースを活用したり、文字を目立たせる図形を加えたり、やり過ぎない控えめで、クリエイティブな5つのテクニックを今回はご紹介します。 詳細は以下から。 01. イメージ写真の空白スペースを利用しよう。 写真の空いている空間を、テキストで埋めてみましょう。「コピースペース(英: Copy Space)」としても知られて

    文字テキストとイメージ写真の上手な組み合わせ!5つのシンプルな方法まとめ
  • ユーザーを惹きつけろ!魅力的なヒーローヘッダー作成の黄金ルール10個まとめ

    ユーザーがあなたのホームページにたどり着いたとき、ページを開くまでに少しだけ時間があり、あなたが何をしているのか伝え、もっとページを見てもらえるように工夫することができます。しかし多くのサイトでは、訪問ユーザーに好印象を持ってもらう機会を逃しています。 ヒーローヘッダーをどのように他の要素から目立たせるか、詳しく確認していきましょう。 ヒーローヘッダーに必要な要素とは? ヒーローヘッダーにデザイン要素を取り入れる方法はたくさんあり、新商品を紹介したり、ブランドが何をしているのかシンプルな文で説明する必要があります。多くのヒーローヘッダーに利用されている要素は以下のとおりです。 目を引く見出しタイトル、ヘッドライン Call-To-Action ボタン 印象的な背景イメージや動画 埋込み型の説明ビデオまたはアニメーション 特集コンテンツを紹介するカルーセル ブランディング要素 – ロゴやスロ

    ユーザーを惹きつけろ!魅力的なヒーローヘッダー作成の黄金ルール10個まとめ
  • グリッドって万能!デザインがグンと良くなる15の理由まとめ

    海外デザインブログCanva Design School Blogで公開された「15 Reasons Why A Grid Based Approach Will Improve Your Designs」より許可をもらい、日語抄訳しています。 グラフィックデザイナーの基礎テクニックのひとつとして、格子状または方眼状のグリッド(英: Grid)は重要なデザインツールと言えます。 ではなぜデザインプロジェクトに、グリッドラインを利用する必要があるのでしょう。デザイナーは、それぞれ自分なりの答えがあると思いますが、むずかしかったり、時間がかかってしまったり、面倒くさいレイアウトを行う手助けをしてくれます。 今回はグリッドをデザインレパートリーに加えたい、15個の理由と参考アイデアをまとめてご紹介します。このテクニックを利用し、ほんの少し変更を加えることで、デザインをグッと良くしてくれるでしょ

    グリッドって万能!デザインがグンと良くなる15の理由まとめ
  • これでもう悩まない!2017年のデザイントレンド完全ガイド

    2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジーファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表!確認しておきたいポイントとは? 2017年のWebデザインはどうなる?

    これでもう悩まない!2017年のデザイントレンド完全ガイド
  • 1