柿元崇利 / U-NEXT @tKackey 「良い」「悪い」、はいったん置いておいて、日本のウェブデザインが北米主導のものといかに異なっているか、を明らかにしたデータ解析に基づく論考（英語）。 まだ全文目を通せていないけど、とてつもない力作で内容が興味深すぎるな。 sabrinas.space pic.twitter.com/RHdM9ECRyd 2023-01-24 14:19:53

バナーの効果を上げるにはどうしたら良いかお悩みの方が多いのではないでしょうか。実は、デザインは意外とロジカルな要素が強いのです。 今回は様々なデザインロジックの中からすぐに使えるものを紹介します！ １．視線の動きの種類 ご存知の方も多いと思いますが、多く人は紙はZ型、webはF型に視線が動いています。左上から始まり、Zの様に右下へ移動、Fの様に右に向かって横に視線が移動します。 他にも色々な種類の視線の動きについての法則がありますので紹介していきます。 大きい物から小さい物へ バナーでも一番見せたい文言を大きく、サブテキストは小さくしているものが多いです。 近くのものから遠くのものへ 近くにある要素から視線は動いていきます。情報をグループ化させ、余白をもたせることで関連する情報であることがわかりやすくなります。 バナー内でも視線の動きを意識することで、よりクリックしやすいものに仕上がります

Ubun BASE for Free Ubun BASE は現在β版として提供しており、全機能を無料で利用することができます。クレジットカード登録不要です。 自動レポート作成で分析／報告書作成の工数を大幅に削減 Ubun BASE の「スライドレポート」機能は、Google スライド形式で自動生成されたレポートをダウンロードすることができる機能です。通常ウブンがコンサルティングサービスで提供しているものと同等の情報量のレポートを無料でご利用いただけます。 ダウンロードしたレポートは加工することもできるので、コメントをつけてそのまま社内報告用に活用することができます。 日別×ASIN別でKPIの推移を可視化 Ubun BASE のダッシュボードでは売上を構成する重要 KPI の推移を、最小単位である日別 × ASIN 単位で可視化されており、売上が増減した際にその原因を早期に特定し対策を実施

なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで

どうもこんにちは、エフ編集部です。 今月もこのコーナーがやってまいりました(パチパチパチ) さて、最近見つけたサイトで、非常によく考えられているなぁ〜と刺激を受けたものがありまして、 どこのサイトかといいますと、 中川政七ニキのサイトですね！ 中川政七商店といえば、商業施設に入っているお洒落な雑貨屋さんのイメージが強いんですが、 ECサイトもかなり気合いが入っています サイトの入口からコンテンツの細部にいたるまで、使い心地の良さを突き詰めているように感じます。 今月は「中川政七商店」のECサイトをスマホで見ていきたいと思います。 横スクロールと、縦スクロールの妙 さて、まず「中川政七商店」のスマホサイトに入ると、すばらしいデザインのバナー類が見えてきます。 まずはこちらのURLから実際に訪問していただけると話が早いかもしれません。 ここのサイトは縦へ流れるスクロールと、横にコンテンツを流す

フォルダを削除 フォルダを削除すると登録されているデザインやメモは 全てお気に入り登録から削除されますがよろしいですか？

楽天ではAmazonなどとは異なり、商品ページの表現の自由度が高く、たとえ似たような商品でもページの完成度だけで売上に大きな差が生じてしまいます。 その分ページ制作には本腰を入れて取り組みたいものです。 この記事では、下記を中心に解説しております。 サイト制作のノウハウ無しでも楽天の商品ページを制作する方法 魅力的な商品ページを作成するポイント 弊社でサポートした楽天市場の成功事例 これから楽天ページを制作する方も、もっとこだわったページを作成し売上を改善したいと思ってらっしゃる方にもお役に立てる記事を作成しました。 【⇓動画でサクッと確認する⇓】 成長企業の楽天ページ制作の5つのポイント 楽天市場でページ制作のポイントを5つご紹介します。 ページ制作のポイントは下記の通りです。 それぞれご説明いたします。 「ページは長め」が基本 楽天市場では、「長めのページで丁寧に説明すること」が売れる

今回は楽天サイトを一から作る際の足掛かりとして利用できる、 楽天ショップヘッダーのテンプレートをいくつか作ってみました。 最終的にはこのような形のデザインやこのような形のデザインが実現できるテンプレートの作成方法＆配布までお伝えしようと思います。 こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。 ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。 「MGSV TPP」が面白すぎて睡眠を削ってます。 今後は「ブラッドボーンのDLC」に「MHX」、来年には「ダークソウル3」に「スターオーシャン5」に「FF15」に「キングダムハーツ3」に… 僕の妻も「アサシンクリード シンジケート」と「龍が如く 極」「龍が如く6」とテレビとPS4の奪い合いによる、家族間の血で血を洗う骨肉の争いが加速しそうです。 さてさて今回は先ほどお伝えしたとおり

在庫について：バランスシナジーは大変人気があり、ご注文の直前に大量注文があった場合には、ご注文をいただいた後であっても、在庫が無くなる場合もございます。 予めご了承を頂きたくお願い申し上げます。 事務椅子 デスクチェア パソコンチェア ワークチェア オフィスチェア シンプル オフィスチェア 疲れにくい オフィスチェア コンパクト 北欧 木部10年保証 90日間返金保証 健康 椅子 背もたれがない 前後に揺れる テレワーク 椅子 昇降式 オートリターン付 背筋が伸びる 椅子 母の日 父の日 敬老の日 誕生日 プレゼント ギフト デスクワーク

ただでさえ重いこのブログ、フォントをWebフォントに変えたことでもっと動きが鈍くなるかも。でも雰囲気が丸くなって嬉しい。 だいぶ長い間、このブログのデザインをいじっていなかったので、少し雰囲気を変えてみようかなと思って。「ブログ書いてる」でくくるとわりと知らない人も多いんじゃないかな、webフォントというものを使ってみました。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 💬 𝕏（twitter）はよくフリーランスの人たちにフォローされてるようです。 Follow @websae2012 webフォントって？ Webフォントは、サーバーに置いておいて使うタイプのフォントです。 普通は、ウェブペー

1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる ちなみに以前まとめたHTMLテンプレート 前回まとめてから3年も経ってるんですね。以下がそのときの記事です。 無料で30枚！スマホ対応HTMLテンプレート 初心者に優しいシングルページばかりを集めました このときもそうでしたが、やっぱり外国産のテンプレートばかりになってしまいました。大和魂が悔しがっているので、そのうちウェブさえでも配布用にレスポンシブデザインのテンプレートを作ってみようと計画してます。 ちなみにパート2 テンプレートをいじくってサイトを作れるサービス テンプレートを探している目的は時

2018年になってここまで、ウェブデザインにとって驚くべき年を迎えています。これまで何年もかけて進化してきたデザインが、デザインシステムやタクタイルデザインのような新しいトレンド、また楽しく元気なレトロスタイルの復活などにつながっています。これまで以上に、ウェブデザインの現状と今後の流れを考えることが重要になってきます。 この記事では、2018年にもっとも影響を及ぼしている、6つの最新ウェブデザインのトレンドをまとめてご紹介します。 01. コンポーネントを元にした「デザインシステム」 まだデザインシステム（英: Design System）を導入していないなら、きっと今後数年以内に利用することになるでしょう。最新版となる 2017-18 Enterprise UX Industry Report によると、デザインシステムを利用していない企業の67%が、現在作成中と答えています。 デザイ

「売れている楽天のショップ」 「担当のECCからここを参考にしたら良いと言われたショップ」 「なんかかっこいいなと思ったショップ」 それらのショップにはほとんどの場合「動くバナー」が設置されていたりしませんか？ 「どうやってやるんだろう」「うちの店舗では無理だな」そんな風に思っている担当者の皆様ご安心下さい。ハカセの研究室なら簡単にコピペだけで導入出来ます。しかも無料です。 今まで出来なかった事が出来る。そう、jQueryならね。 いきなりうざい感じで始まりましたが、本日はやってみたいと考えてる方も多いはずの「jQuery（ジェイクエリー）」を使用した動くバナーの導入方法を説明します。 jQueryとは？ オープンソースのJavaScriptライブラリの一つ。2006年1月にJohn Resig氏が最初のバージョンを公開し、現在は有志プログラマによる開発者集団「jQuery Team」が開

初心者でも超簡単に設置できる、レスポンシブ・カルーセルに対応した世界一使いやすい画像スライダープラグイン「 bxSlider」の使い方と「オプション」によるカスタマイズを、説明書のように解説します。またbxSliderが「動かない時」の対処法も説明します。オプションは「見やすい表」にしてオプションの説明と記述方法と使い方をまとめています。 現在bxsliderと並んで、大人気で現在最もスタンダードな位置づけの脱jQueryなスライダー「swiper」の使い方を知りたい方はこちら

Googleタグマネージャー（GTM）とは？アナリティクスとの連携方法や使い方を解説 これから“BtoBマーケティング”を本格的に行いたいという方向けに、マーケティングの戦略設計や各種施策のノウハウを網羅した資料です。 1. Googleタグマネージャー（GTM）でどんな問題が解決できる？ サイト担当の皆様、日々の業務でこんな問題はありませんか？ ・タグを貼る度に、別の部署や制作会社に依頼しなければならない ・ 一つのサイトに様々なツールのタグが混在してカオス ・ どこにどのタグが記述されているか、把握しきれない ・複数人でサイトの管理しているので、最新状況が把握しきれない タグマネージャーを導入することで、これらの問題が解決できます。 CTAの効果計測、広告配信設定、外部ツールとの連携、チャットポット設置の際など、サイト運用上でタグを使うシーンは数多くありますので、サイト運用にはタグマネ

2017年、特に人気の配色カラーパレットのひとつが、淡い色合いが特長のパステルカラーです。今回は、これから暑くなる夏の季節にぴったりな配色カラーパレット15個をまとめてご紹介します。 パステルカラーを中心とした控えめで落ち着いた美しい配色は、ユニーコンの色合いや夏の夕日、美味しそうなマカロン、アイスキャンディーなど夏を連想させるアイテムが揃います。 配色をそのままコピー&ペーストできるHEX値も一緒にまとめています、ウェブサイトやグラフィックデザインの制作で配色に迷ったときに活用してみてはいかがでしょう。 配色完全ガイド！カテゴリー別見本100個とカラーパレットの使い方まとめ Webデザイナー向け配色ガイド！すぐに役立つカラーパレット50個まとめ 夏デザインの参考にしたい、パステル系の美しい配色カラーパレット15選まとめ