はてなブックマーク

最近のWEBサイトではアニメーションなどで、なにかしらの動きをつけるのが当たり前になってきました。普段、私も制作をして「ここにちょっと動きをつけたいんだけど…」「面白い動かし方ないですかね？」と相談を受けることが増えました。 ひと昔前までは「動き」というと、Flashで作るのが定番でしたが、スマートフォンの普及や新しいブラウザの広がりにより、今はFlash以外で対応するのが一般的になりつつあります。 そこで今回は、自分自身の備忘録も兼ねて、アニメーションをつける方法をまとめてご紹介したいと思います。ひとくちに「動き」といっても、実装方法もさまざまありますし、見せ方も豊富。今後のWEB制作のちょっとしたヒントになれば幸いです。 CSSで動かす CSS3では要素にアニメーションを設定し、色々な動きをつけることができます。よく見かけるフェードイン、フェードアウトといったおなじみの動きだけでなく、

こちらの記事で、40代女性がネットショップを一番利用しているという記事をご紹介しました。そこで、今回は40代女性の私が使いやすい、素敵だなと感じたUI・UXのECサイトをご紹介します。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに UI・UXの参考になるのはもちろん、商品を売るための戦略・アイデアも秀逸で、購入意欲をそそられるサイトばかりです。 UI・UXの参考に！ “ひと工夫”が逸材なスマホECサイト GILT 正規ブランド品が毎日安い会員制ファミリーセール・サイト。 リッチなデザインとビジュアライズされた写真が印象的です。ビジュアルによって商品に付加価値を与えたい、そんなとき、色使いやデザインの参考にしみてはいかがでしょうか。 ちなみにこのサイト、ショッピングカートへの取り置きは15分だけ。ショッピングカートに入れた途端カウントダウンがはじまり、その焦りから思わず

日常的にスマホサイトを使っていて、使いづらいなと感じることありませんか？ 良かれと思って実装したものが、実際はユーザビリティを低下させているものになっていることが多々あります。 そこで今回は、スマホサイトを使いにくくしているUIを５つ紹介したいと思います。 固定表示されるメニュー、ページトップへのリンク スマホサイト、アプリでよく見られる、画面の上部に固定されているメニューです。 ページの下までスクロールしても、すぐメニューが開ける�点では便利ですが、画面�が小さいユーザーにとっては表示される範囲が狭まり、何度もスクロールをすることになるため、使いづらいものとなってしまいます。 また、ページトップへのリンクについても同様で、画面右下に配置されることがよくありますが、誤タップにより意図せずページトップに戻ってしまうことがあります。 途中まで読んでいたのに、急にページトップに戻ってしまったら、

私事ではありますが、最近学生が作ったwebサイトの発表を見る機会がありました。やたらとパララックス効果を使用したサイトが多かったのが印象に残っているのですが、はやっているからといって、なんでもかんでもパララックスでつくればいいとは思いませんよね？　他にもサイトのテイストに合ったものがあるはず！ ということで、今回はパララックス効果含め代表的な３つの背景効果についてご紹介いたします。 一番のはやりはコレ：パララックス効果 2012年頃に注目度を上げたパララックス効果。 とはいえ、パララックス効果とはどんなもの？ と思っている方もいらっしゃいると思います。分かりやすい例としては、東京スカイツリーのサイトでしょうか。 東京スカイツリー TOKYO SKYTREE 下へスクロールしていくと、キャラクターが楽しく動きながら、スカイツリーの紹介をしてくれます！ この他に気になったのは、キリンさんの【澄

スマホサイトのデザインを考える際、何を指標とすべきでしょうか。そのサイトの目的、特性によって考え方はさまざまですが、今回はユーザーの視線の動きに配慮したデザインの考え方として、「視線誘導」の3つのパターンを紹介します。 「視線誘導」とは、絵画、写真、映画、漫画などの世界の専門用語で、画面を眺める者の視線の流れをスムーズに誘導するための技術の総称です。もちろんWebデザインでも使われる言葉で、ユーザビリティの優れたデザインをつくるために重要な要素です。 「視線誘導」のパターンを理解して、スマートフォンサイトデザインの参考にしてみてはいかがでしょうか。 まずは１つめ「グーテンベルグ・ダイアグラム」 視線が左上から右下へながれることを利用した考え方「グーテンベルグ・ダイアグラム」。テキストの比重が高いコンテンツや画像が均等に並んでいるページ（グリッドデザインなど）では、このレイアウトが最も多いパ

スマホサイトを制作する際、どのようなフローで進めていますか？ PCサイトと同じ方法でしょうか？ 同じように見えて、ちょっと違うところがいっぱいあるスマホサイトの制作。 メモとして、まだ見ぬ新しいスタッフのために、今回の記事は私が日々スマホサイト制作のディレクターとして働いている中で、いつもお世話になっている便利ツールをご紹介します。 雑務編 IDManager Windowsの有名なパスワード管理ソフト。chromeのアドオンで十分じゃん！ と思ったアナタ、そんなことはありません。エクセルにかけたパスワードを忘れて開けない…なんて体験をしたことはありませんか？ ID・パスワード以外の情報も管理可能。パスワード自動生成もできます。 ダウンロードサイトはこちら Keisan お金や記念日など「生活の計算」をはじめ、日常でも使える「数学・物理の計算」、統計関数などの 「専門的な計算」など、kei

2015年が始まりました。各媒体から「2015年トレンド予測」が発表されていますが、web業界ではどうでしょうか？ 昨年の2014年を総括すると、B to Cのコミュニケーションでは、PCよりもスマホからのアクセスが完全に上回ってしまった。つまり逆転が起こったといえます。 この明らかな変化に対して、PCからスマホへのシフトが一気に起こる可能性がでてきました。この考え方はweb制作者のみではなく、今後一般の企業経営層にも浸透し始めるでしょう。この臨界点を迎えた「2015年スマホサイトトレンド」を予測してみたいと思います。 2015年スマホサイトトレンド予測10!! 1.本格的なスマホ対応へ ～第2ラウンドが始まる～ 日本でのスマホ対応は、いわば間に合わせのトライアル対応。スマホ普及率、利用率が高まった以上、北米のように、本格的なスマホ対応が進行していく。従来のトップページや第２階層までといっ

さぁ、スマホサイトを作ろう！ の前にまずは情報収集。 ブックマーク必至の「スマホデザインまとめサイト」を集めました。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに Think Thing https://thinkthing.net/ 「スマホ」「デザイン」「まとめ」でググると1位に表示されるスマホデザインまとめサイト。ユーザー投稿型で、国内外のスマホデザインキャプチャが掲載されています。 スマートフォンサイト集めました。 https://sp-web.jp/ スマホサイトのリンク集。ニュースやポータルサイト、美容などカテゴライズされており、業種別でデザインを見比べたいときに便利。カラー別でも探せます。 iPhoneデザインアーカイブ https://iphonedesignarchive.jp/ i

スマホデザイン・UI 2014.07.07 WEBサイトやアプリの【Retina対応方法おさらい】 昨年からiPhone、iPad、iPad miniなどApple系デバイスの広がりによって急速に浸透して行った【Retinaディスプレイ】のモバイル端末。 一番はじめに打ち出された【Retina】という単語がユーザーにも浸透していますが、Windows8.1などでも高解像度(高DIP=Retina)対応が打ち出され、デバイス対決の舞台は”解像度”の戦いへと切り替わってきているのではないでしょうか。 我々WEBサイト制作者、WEBアプリ制作者が逃げられないのが、この高解像度ディスプレイへの対応になります。 今回は、WEBサイト、アプリ両方に影響があるRetinaへの対応方法をおさらいしてみましょう。 【関連ページ】スマホサイトを高速化、モバイルファーストインデックス対策 画像をRetina対応

前回は「ハンバーガーメニュー」について紹介させていただきました。 今回はハンバーガーメニューだけではない、レスポンシブデザインでも使えて、変換ツール系でも利用できる、jQueryメニューをいくつかご紹介します。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに jQueryでサイトに合ったナビゲーションメニューを作ろう レスポンシブデザインで使える簡単メニュー「Naver」 レスポンシブデザインのサイトで今もよく見る形の、画面幅が小さい場合にグローバルメニューを、ハンバーガーボタンのメニューの中に隠すjQueryです。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに サンプルコードはこんな感じになります。 <nav> <a href="#">Home</a> <a href="#">News</a&

今回は、最近ちらほら聞くようになった「ハンバーガーメニュー」について、ご紹介したいと思います。 ドロワーメニューじゃなくてハンバーガーメニュー？ みなさん、ハンバーガーメニューって知ってますか？ ハンバーガー屋さんの店頭に置いてあるメニューではなくて、スマートフォンサイトやタブレットサイト、最近ではPCサイトでもちらほら見かける三本線のナビゲーションメニューです。 この赤枠で囲ったものが「ハンバーガーメニュー」と呼ばれるものです。三本の線がハンバーガーに見える事からこう呼ばれるようになったそうです。（僕にはハンバーガーには見えないですが・・） ハンバーガーメニューはドロワー(Drawer)の名前が変わったものになります。（僕も最近知りました・・） 未経験から6ヶ月でWebデザイナーへ 始めてみるなら、未経験からでもWebデザイナーや動画クリエイターを目指せるスクールがデジハリのスタジオ横浜

スマホサイトのEFO、考えていますか？ EFO（エントリーフォーム最適化）とは、Entry Form Optimizationの略称で、Webサイトの入力フォームを利用しやすいように改善すること。フォーム最適化を行うことで、途中離脱するユーザーを最小限に抑えるための施策のことをEFOといいます。 お問い合わせや、資料請求のフォームを入力している最中にエラーが頻発したり、入力項目が多いとユーザーは途中でストレスを感じ、離脱してしまいます。 入力の手間を減らし、ユーザーがより短時間で正確に入力を完了できるように設計することがCVや売上アップのための重要なポイント。しかし、PCサイトはもちろんのこと、特にスマホサイトでストレスフルなフォームとよく遭遇します。 スマホでフォーム入力はなるべくしたくないけど… 最近個人的に、スマホで新規会員登録や、資料請求をすることが多くなってきました。 （自宅のP

レスポンシブWEBデザインをどう思う？ みなさんは、「レスポンシブWEBデザイン」について、どう思われていますか？ レスポンシブWEBデザインは、スマホなどへの表示対応策として注目されています。ウィンドウを伸ばしたり縮めたりすると、グリッドが突然変わって、そのデバイスに適合されるという仕組みをご存じの方も多いでしょう。このデザイン手法は、2012年6月に、Googleがモバイルサイト対応として推奨して以来、マルチスクリーン時代の対応策として注目されてきています。 Googleは、なぜレスポンシブWEBデザインを推奨したのか？ なにゆえに、Googleは、レスポンシブWEBデザインを推奨したのでしょうか？ Googleはこう答えています。 レスポンシブ デザイン: 1つの URL について同一の HTML を配信し、CSS メディアクエリを使って、クライアント側でどのようにコンテンツをレンダ