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

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

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

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

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

ますます加速するウェブデザインの最先端を体感できる、最新 Web テクニックを実装した、HTML/CSSコードスニペットをまとめています。 デザインと同時にまとめてコードを確認できるので、コピペで手軽に試してみることも可能です。コード共有コミュニティーサイト CodePen で話題となっている作品を中心に、ウェブデザインにスパイスを加えてくれる、ユニークなエフェクトが揃っています。 詳細は以下から。 コピペで実装できる、最新ウェブテクHTML/CSSコードスニペットまとめ 右下に表示されている「Return」をクリックすると、エフェクトが再読み込みされます。また各ソースはHTML、CSS、JSタブをクリックすることで確認することができます。 Fullscreen Image Layer Views 並べられたキーワードにマウスを重ねると、フルスクリーン画面で写真が切り替わります。 See

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