長いスクロールページでユーザーを引きつけるための５つの方法
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ファーストビューだけで情報を伝える時代は終わりました。最近では長いスクロールや無限スクロールを用いるサイトが増えてきています。ユーザーが簡単にコンテンツをスクロールができ、スクロールすると自然に情報が表示されるサイトは以下のような利益をもたらします。 ナビゲーションがシンプルになる ユーザーをコンテンツにひきこみやすくなる モバイルサイトへの対応が楽になる このテクニックが普及した理由のひとつとしては、モバイル端末の画面を見る人が増えたことが考えられます。画面が小さいほど長いスクロールが必要だからです。 ジェスチャー操作は簡単にできて楽しいものですが、ユーザーは長いスクロールページにわずらわしく感じることもあるでしょう。ここでは、ユーザーの期待に応えるような長い
海外のおしゃれなデザインを集めたギャラリーサイト７選
Webデザインを考える際に、デザイナーなら誰でもおしゃれなサイトに仕上げたいものです。ですが、具体的に「おしゃれなサイト」と一言で言っても、その感覚は千差万別です。 この記事では、デザインに行き詰まったときなどに眺めたい、おしゃれなサイトを集めたギャラリーサイトをご紹介します。様々なサイトを見ることで視野を広げ、引き出しを増やし、ご自分のデザインに活かしてみて下さい。 The Best Designs シンプルで洗練された、海外のギャラリーサイトです。サイトのファーストビューをキャプチャした画像が大きく、見やすくなっています。 また、画像をクリックすると詳細ページに遷移して、トップページ以外のデザインもじっくり見ることができます。気に入ったデザインを保存できるようSNSボタンが設置してあり、PinterestのPin itボタンなどでストックしていくと良いかもしれません。 Web Desi
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
Web制作に必須！PNG画像を簡単に圧縮できるサイト・ソフト８選
Webデザインにおけるデザインは当然重要ですが、これと同時に「画像の容量をいかに減らせるか」ということも大切なポイントです。容量が大きいとページの表示速度が遅くなり、ユーザーのイライラの原因になってしまいます。 特に透過色を使用できて、可逆圧縮形式の便利なPNG画像などは、どうしてもファイルサイズが大きくなってしまうのが難点です。 今回は容量が大きくなりやすいPNG画像の圧縮を中心に便利なサイトやアプリケーションを紹介します。JPGやGIFなどの他形式から変換するような機能が付いているものも多いので、併せて確認してみるといいでしょう。 PNG画像を圧縮できるWebサービス Optimizilla
Photoshopで使える鉛筆やクレヨンのような無料ブラシ10選
デザインに手描きのようにアナログな質感を加えたい、そんなとき手軽に使えて便利なのがPhotoshopのブラシ素材。ここでは鉛筆や色鉛筆、クレヨンなどデザインの質をグッと上げてくれるPhotoshop用無料ブラシ10選をご紹介します。 鉛筆系ブラシ Pencil Brushes 鉛筆の目の粗さから選べる鉛筆ブラシのセットです。 Pencil Brushes - PS7 13種類の異なるタッチの鉛筆ブラシのセットです。使用する際はクレジット表記（Dark-Zeblock）が必要。 PENCIL BOX こちらも鉛筆のようなタッチのブラシ５種類以上がセットになっています。ぼかしたようなブラシは、見本のように自然な陰影をつけたいときに便利ですね。商用利用可。 The Sketch Arsenal 普通の鉛筆や色鉛筆、乾いたマーカー、水彩画など、様々なタイプのブラシ20種類がセットになっています。こ
古典絵画から学ぶデザイン
デザインという言葉は今日では一般的ですが、デザインという言葉がなかったような過去の古典美術の世界でもデザインの概念はありました。絵画というと、デザインというよりファインアートの印象が強いですが、過去の画家たちから学ぶことも多くあります。そこで、今回は古典絵画から学ぶデザインについて説明します。 絵の情報量 モチーフの置き方で変化するもの こちらに2枚の絵があります。 Aは木の隣に猫がいます。Bは木の後ろに猫が配置されています。どちらも同じ要素で描かれていますが、違いは何かわかるでしょうか。 答えは「情報量」です。 Aの場合、木と猫が並んではいるものの、3次元で考えたときに「どちらが前にあるのか」や「どちらが後ろにあるのか」がわかりません。わからない、ということは観るほうにとって情報が与えられてない、ということです。 一方、Bは確実に「木が前で猫が後ろにいる」という情報を観る人に与えます。つ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
