gun

web関連の自分の課題を記載していきます

gun

web関連の自分の課題を記載していきます

ブラウザ、OSシェア率まとめ （2022年2月）

2022.03.04 2022年2月時点のブラウザ、OSシェア率をまとめました。 ■ブラウザ 世界シェア 上位3位⇒1.Chrome 64.3％、2.Safari 18.96％、3.Firefox 3.71％。 日本シェア 上位3位⇒1.Chrome 47.71％、2.Safari 32.94％、3.Edge 9.06％。 世界と比較して日本ではSafari、Edgeのシェア率が大きく、IEのシェア率も世界では1％以下に対して2％以上あり、2022年6月のIEサポ

gun

    • フリー素材サイト（一部有料あり）28選

      2022.2.25 写真、イラストなどのフリー素材サイトを集めました。 写真AC写真のフリー素材サイト。アカウント登録（無料会員）で利用できます。無料会員はダウンロード回数の制限あり。ダウンロード回数制限なしの有料プランも用意されています。 ぱくたそ フリー写真素材サイト。いろいろな企画コラボをしていて、自治体とコラボした地域写真など他ではあまり無さそうなものもあります。 BURST 海外のフリー写真素材サイト。写真のサイズは高解像度と低解像度が用意されているので要素

      gun

      • WebPについて

        2022.2.21 少し前にWebPについて質問を受けたことがあるので、どんなものかまとめました。 WebP（ウェッピー）とは oogleが開発した画像形式。画像の品質を保ちながら軽量化できることからWebサイトの表示速度改善方法の一つとして推奨されています。 PNGと比較して26%、JPEGと比較して25～34%データサイズが小さくなるといわれています。 WebP lossless images are 26% smaller in size compared to

        gun

        • 2022年Webデザイントレンドについて

          2022.02.15 2022年Webデザイントレンドについてまとめていきます。 ■ニューモーフィズム 要素の出っ張りや凹みを表現したデザイン手法。ミニマルデザインとの相性がよく洗練された印象になります。 SRA東北 Digital Connect 株式会社ワンキャリア ■グラスモーフィズム すりガラスのようなぼかしを背景に入れる手法。半透明のぼかしを置くことで視認性が保たれます。 Studio Tumulte Decimal ■データを魅力的に視覚化する 商

          gun

        ブラウザ、OSシェア率まとめ （2022年2月）

        gun

          自動車の広告表示について

          2022.2.1 自動車（クルマ）の広告表示について、よく使用されるものの留意点などをまとめました。広告やWebサイトなどの制作では原稿が提供されることが多いですが、知っておいてもよいかと思います。 ※本記事は新車に関するものになり、中古車は含まれません。二輪自動車（バイク）も含まれません。 最上級を意味する用語の表示：最高、No.1など 商品の宣伝文句でよく使用されている「1位」や「No.1」などの用語。最上級を意味する用語ですが、使用するには「客観的根拠を記載する」と

          gun

          自動車の広告表示について

          gun

          ホバーエフェクト サイトまとめ

          2021.11.10 ホバーエフェクトが面白いと思ったサイトを集めました。 ■SEED採用サイト メニューごとに画像が切り替わります。 ■raff 画像が動きます。テキストリンクにマウスオーバーで画像が表示されます。 ■Figma to Wordpress Conversion Servic カーソルを置いたポイントから楕円状にボタンの色が反転。並んでいるボタンの上でカーソルを移動すると、追従するように動きます。 ■BRUTUS 本のインデックス部分がリンクになって

          gun

          ホバーエフェクト サイトまとめ

          gun

          クリックエリアについて

          2021.10.22 クリック、タップエリアについてのまとめです。 ■ポインタ領域とタッチ領域 ・ポインタ領域 マウスやスタイラスペンなどでクリックする領域の基準はどのくらいなのか。Googleが推奨する 「MATERIAL DESIGN（マテリアル デザイン」にでは 「最小領域 44x 44dp」 としています。 ・タッチ領域 MATERIAL DESIGN では、「最小領域 48 x 48dp 」としており、ボタンやアイコンが48x48dp以下であったとしてもその周

          gun

          クリックエリアについて

          gun

          スマホサイトのメニューについて

          2021．09.06 スマホサイトのメニューについて調べました。 スマホサイトではハンバーガーメニューが多く使用されています。スマホの画面でメインコンテンツの表示領域を減らさないために有効な見せ方だと思います。はじめはメニューがどこか迷うこともありましたが、広く使用されて迷うことも少なくなってきています。 ハンバーガーメニューの中でも開き方の違いやそれ以外でどのようなメニュー表示方法採用されているか調べました。 ページ右上に表示。ドロワーメニュー。上から下への動き。 参考

          gun

          スマホサイトのメニューについて

          gun

          .htaccess 基本的な機能について

          2021.08.26 リダイレクト設定をしたときに.htaccessファイルがどういうものか理解が不足していたため、基本的なところを調べ直しました。 ■.htaccessとは 「.htaccess」はWebサーバーの基本的な動作を、ディレクトリ単位で設定するファイルです。 Apache（アパッチ）が使用されている環境で使用することができます。 ■設置場所 設定をしたいディレクトリにアップロードします。 アップロードしたディレクトリとその配下にあるディレクトリすべてに設定

          gun

          .htaccess 基本的な機能について

          gun

          修正依頼ツールまとめ

          2021.07.30 修正依頼資料を作成する場合、パワーポイントやPDFで作成することが多いのですが、キャプチャ作成などの手間を軽減できる修正依頼ツールをまとめました。 ■AUN（あうん） 登録不要・無料で使用できるツール（有料プラン有）。URLを発行して共有ができます。 キャプチャを作成したいWebサイトのURLを入力するだけでキャプチャをとることができ、修正指示もそのまま記入することができます。キャプチャサイズはPC、スマートフォン、タブレットが選択可能。 修正指示に

          gun

          修正依頼ツールまとめ

          gun

          夏のWebサイト

          夏キャンペーンやイベントなど「夏」関連サイトを集めました。 ■山崎製パン：2021 夏のおいしさいきいき！キャンペーン イラストを使用。青と黄で晴れた夏のイメージ。 ■JRA：サマーシリーズキャンペーン2021 青。幾何学模様が日差しが反射してるような印象を受けます。 ■岡山県：7つの謎解き絵巻物 日本遺産スタンプラリー 青と黄。鳥獣戯画の動物と和の模様で歴史とスタンプラリーの楽しさが表されています。 ■サントリー：金麦 絶対もらえる！夏のあいあいカレー皿キャンペーン

          gun

          夏のWebサイト

          gun

          EFOツール

          2021.07.07（2021.07.20 更新） EFOツールについてまとめていきます。 ■EFOとは EFOは「Entry Form Optimization」の略で日本語では「入力フォーム最適化」と訳されます。 入力フォームを利用しやすくし、離脱率を下げ、コンバージョンの改善を行う施策です。 EFOツールは入力フォームを最適化するためのフォームになります。 ■入力フォーム改善ポイント 離脱率を改善するポイントは既にいろいろなところで紹介されていますが、学習のため

          gun

          EFOツール

          gun

          Adobe XD Trailで作成 3

          Adobe XD Trail を利用してグラフアニメーションなど動きのあるものを作成しました。 ■アニメーションする円グラフ 参照したページ ■アニメーションする棒グラフ 参照したページ ■アニメーションする線グラフ 参照したページ ■プルダウン 参照したページ ■アコーディオン 参照したページ

          gun

          Adobe XD Trailで作成 3

          gun

          Adobe XD Trailで作成 2

          Adobe XD Trail を利用して作成できる基本的な機能です。 ■ぼかし効果 参照したページ ■3D変形 参照したページ ■カルーセルバナー 参照したページ

          gun

          Adobe XD Trailで作成 2

          gun

          Adobe XD Trailで作成

          2021.06.29 Adobe XD Trail で作成できるボタン、アニメーションです。 ■マウスオーバーで色が変わる 参照したページ ■マウスオーバーで形状が変わる 参照したページ ■ハンバーガーボタン 参照したページ ■チェックボタン ／ ON/OFFボタン チェックボタン ON/OFFボタン 参照したページ ■ラジオボタン 参照したページ ■アニメーション（フェードイン/アウト） 参照したページ ■拡大縮小のアニメーション 参照したペ

          gun

          Adobe XD Trailで作成

          gun

          コンバージョンボタン

          2021.03.24更新 コンバージョンボタンは、Webサイトを訪問したユーザーが、資料請求や商品購入、問い合わせをするなどの行動をするきっかけになるボタンです。 Webサイトのヘッダーやフッター、フローティングメニューに配置されているのを多く目にしますが、効果的なボタンと配置についてまとめました。 ●効果的なボタンと配置 株式会社WACULの調査では、下記のような結果が発表されています。 ・ファーストビュー内にコンバージョンボタンを配置したサイトはコンバージョン率（CV

          gun

          コンバージョンボタン

          gun