サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
セキュリティ
www.asobou.co.jp
リスティング広告の費用対効果を高めるうえで、PDCAサイクルを実施して広告やランディングページのクリエイティブを最適化することは必要不可欠なものになります。 PDCAサイクルの過程でよく使われる検証方法がABテストです。今回は、Google広告でABテストをする際に便利な「下書きとテスト」機能を使った実施方法についてご紹介します。 ABテストとは ABテストとは、web広告やwebサイトを最適化するために、仮説に基づく施策を2パターン(もしくは複数パターン)用意して同時並行で比較検証する手法です。 例えば、異なる訴求方法のランディングページを2パターン用意したとします。 ランディングページのゴールが「資料請求」だった場合、2つのランディングページを同時並行で一定期間公開し、どちらのランディングページがコンバージョン率(CVR)が高いかを検証し、効果の高いランディングページを採用します。 こ
Googleマップの機能の一つに、「Googleマイマップ」というものがあります。 Googleマイマップは通常のGoogleマップを使って、オリジナル地図を作成できるサービスです。複数の場所を地図上で簡単にマーキングでき、メモやルートと一緒に保存しておける機能があります。 旅行用の「観光マップ」やお気に入りのお店をリストアップした「グルメマップ」、ドライブの経路をまとめた「ルートマップ」など、使い方は様々です。 第1弾となる今回のブログでは、基本のGoogleマイマップの作り方と、応用としてルートマップの作り方をご紹介します。 Googleマイマップを作ってみよう Googleマイマップを作成するには、Googleアカウントが必要です。 お持ちでない方はアカウントを作成してからマイマップ作りを始めましょう。 新しい地図を作成する まずGoogleマイマップにアクセスして、自身のGoogl
皆さんはYouTubeでお気に入りの動画をもう一度再生したいと思ったときにどうしていますか? 毎回検索している方やお気に入りの動画をブックマークにしている方も多いのではないかと思います。そんなときにおすすめの機能が「再生リスト」機能です。 今回の記事では、再生リストの作成の仕方やリスト内の動画を追加、削除する方法をご紹介いたします。 再生リストは「お気に入りフォルダ」 再生リストとは、お気に入りの動画を集めたファルダのようなものです。自分の好きなスポーツの動画をまとめておいたり、作ってみたい料理の動画をまとめておいたり、再生リストの用途は様々です。自分でアップロードした動画に限らず、YouTubeで公開されている動画であれば再生リストに追加することが可能です。 また、再生リストは共有することもできるので、SNSやブログで再生リストをシェアすることができます。 【活用例】YouTube Ja
興味のある方は settings.json の設定例を最後に記載していますので参考にしてみてください。 3. Windows TerminalでWSL2を起動する設定方法 以前の記事でWSL2の Ubuntu-20.04 をインストール方法を紹介しました。今回はその方法でインストールした Ubuntu-20.04 を使用する設定方法例です。 { "$schema": "https://aka.ms/terminal-profiles-schema", // Windows Terminal起動時にデフォルトで起動するプロファイルにUbuntu-20.04のguidを指定 "defaultProfile": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}", "profiles": { "defaults": {}, "list": [ // Ubuntu-2
ティザーサイトやリニューアル前のサイトのように、既にインターネットから削除されてしまったwebページを閲覧したいと思ったことはないでしょうか? 特にweb担当者であれば、昔のサイトを確認したいと思ったことは一度や二度では無いかと思います。 今回はそのような要望を叶えられるサービス、WAYBACK MACHINEを紹介します。
当社では普段の開発環境にLinuxを用いており主にWindows PCからSSHで接続して作業をすることが多いですが、vagrantやdocker、npmなどの普及によりローカルでの作業も増えてきました。WindowsにはTeraTermやPuttyなどの有名なSSHクライアントがありますが、ローカルで作業するニーズには合いません。 そこで今回はWindowsでUnixライクな環境を使えるMSYS2をご紹介したいと思います。 MSYS2 is a software distro and building platform for Windows At its core, it is an independent rewrite of MSYS, based on modern Cygwin (POSIX compatibility layer) and MinGW-w64 with the
フローを把握する wireを使ってのDIは、以下のフローになります。 「DIしたい対象を生成する関数」を生成する関数を定義する wireコマンドで、上記のファイルから「DIしたい対象を生成する関数」をジェネレートする その関数を利用する 他の言語のDIコンテナと比べると、すこしフローが違うので最初は戸惑うかもしれません。 DIコンテナ(とその設定)を、メタ的に自動生成するイメージに近いかと思います。 チュートリアルで動きを確認する こちらの公式のチュートリアルを動かしながら動作を確認していきます。 https://github.com/google/wire/blob/master/_tutorial/README.md まずは、手動でDIするコードで動きを理解しておきます。(予習は大事です) main.go を作りその中に以下のコードを書き込みます。 package main impor
4月から新社会人になってキーボードでの入力機会が各段に増えた方もいるのではないでしょうか?オフィスワーカーにとってタイピングは避けて通れず早めの習得が重要です。 さらに、コロナウィルスの影響でリモートワークも増えチャットツールでコミュニケーションをとる機会が増えていきます。そのため今後も益々タイピングの重要性が高まっていくと思われます。 そこで今回は基本的な練習からプログラム写経練習用まで5種類のサービスをご紹介します。
前回の記事positionプロパティを身に着けよう!基本的な知識と使い方を解説!(基礎編)ではpositionプロパティにおける4つの値について解説しました。 今回はこれらの値全てと類似点を持つposition: sticky;に関して解説していきます。 position: sticky;とは positionプロパティは入れる値に応じて要素の高さの有無が決まっています。 static、relativeであれば高さを有し、absolute、fixedであれば要素の高さがなくなります。 また、要素の位置指定をする際はそれぞれ基準となる要素が決まっています。relativeは通常配置される位置を基準に、absoluteは基準となる親要素、fixedはウインドウ全体を基準としていました。 stickyを設定された要素は、通常の位置に配置され、その要素の位置がウインドウ全体を基準として、指定位置の
デザインをするうえでぜひ知っておきたい知識の一つにジャンプ率による効果が挙げられます。今回はデザインにおける基本的な知識である「ジャンプ率」について解説していきます。 デザインにおける対比効果とは? コンテンツの内容を分かりやすく伝えるためのテクニックとして、強調したい要素とそうでない要素を区別し「対比」させる方法があります。対比の方法は主に以下の三つに分かれます。 大きさを変える 色を変える 密度を変える デザイン上の要素を対比させることによって、どの要素が重要なのか素早く正確に伝えることができます。 対比効果の設定例 大きさを変えることで生まれる対比効果の例を、実際に見てみましょう。 サンプルAは、要素同士を全く対比していないので、どの要素が重要なのか伝わってきません。 サンプルBは、どれもこれも強調していて、何を一番伝えたいのかわからなくなってしまっています。 サンプルCは、適切な要
限定公開に設定された動画と再生リストは、リンクを知っているユーザーのみが表示し、共有することができます。そのため、他のユーザーがチャンネル ページの [動画] タブを開いても限定公開動画は表示されません。また、他のユーザーによって限定公開動画が公開再生リストに追加されない限り、YouTube の検索結果にも表示されません。 限定公開動画の URL は他のユーザーと共有できます。動画を共有されたユーザーは Googleアカウントを持っていなくても動画を見ることができます。リンクを知っているユーザーは、その動画をさらに他の人と共有できます。YouTubeヘルプ:動画のプライバシー設定を変更する 特定の人に動画を共有したい場合には、「非公開」もしくは「限定公開」を選ぶことになります。 ただし、「非公開」の場合は、Googleアカウントを持ったユーザーでなければ招待できませんし、Googleアカウ
webの制作のなかでよくGoogleMapを利用しているのですが、ストリートビューもGoogleMapAPIから操作できることを知りました。 そこで今回はGoogleMapAPIでストリートビューを操作して付近を散歩するプログラムをつくってみようと思います。 作成するプログラムの仕組み 今回ご紹介するプログラムは 開始位置を指定してストリードビューを描画 画面内に表示されるリンクを取得 向ている方向に近いリンクを選んで位置を更新 ただし、リンクが4以上ある場合はランダムでリンクを選択して位置を更新 以上を指定した回数繰り返す仕組みとなっています。 ランダムな要素をいれることで思いがけない方向にいくことを楽しもうと思います。 リンクを取得してどれを選ぶか?の箇所を色々と工夫することで行先がかなり変わってきます。 自動再生する前のストリートビュー 作成したソースコード <!DOCTYPE ht
Google Chromeには、「デベロッパーツール」(以下、DevTools)という機能があります。 主にwebサイトの開発時に利用すると便利な機能ですが、自社サイトや自分の気になるサイトを調査するときに役立ちます。 さまざまな機能を持つDevToolsですが、今回は「Network」パネルを使って、サイトが表示されるまでの通信状態をエンジニア目線で調査していきます。 リクエスト全体を俯瞰する 今回は、弊社のサイト「https://www.asobou.co.jp/」を対象に調査してみたいと思います。 Google Chrome のDevToolsを開いて(windowsの場合は「F12」キー)、上記のURLにアクセスし「Network」パネルを開きます。 パネルの上部には、ブラウザとサーバーの通信を俯瞰したグラフが表示されます。 パネルの下部には、リクエストの詳細リストが表示されます。
先日Googleは業務支援アプリ開発プラットフォームの「AppSheet」を買収しました。 この「AppSheet」の特徴はノーコードでアプリケーションの開発が行えることだそうです。いつもコードを書いてアプリケーションを作成している筆者としてとても気になります。 そこで今回は「AppSheet」で何ができるのか調べて、試してみようと思います。 AppSheetとは AppSheetとは業務支援アプリ開発のプラットフォームで、以下のような特徴があります。 プログラムを記載する必要が無いために、プログラム言語の知識がなくてもアプリケーションが作成できます カスタマイズ可能なのでアイデア次第でいろいろな業種・業態・業務内容に対応可能です マルチデバイス対応で、端末を問わず作成したアプリケーションにアクセス可能です
アーティスでは、フルHDのデュアルディスプレイ環境がスタンダードです。 十年以上前に、シングルディスプレイからデュアルディスプレイへ移行したときに作業効率が上がるのを体感しました。 システム開発者は、IDE(統合開発環境)とシェルを行き来したり、リファレンスを参照したりするなど、多くの情報を同時に表示したい場面がよくあります。 最近は、Dev/Opsの流れでインフラやミドルウェアのメトリクスを監視することも多く、もう一枚ディスプレイを増やそうかと検討していました。 これは個人的な好みですが、マルチディスプレイにする場合、すべてのディスプレイを同じモデルで揃えたくなります。 異なるメーカーのディスプレイでマルチディスプレイ化すると、高さが合わなかったり、色味が違ったりして気になります。 気になるだけならまだ良いのですが、頭痛や眼精疲労の原因になることもあるようです。 このような理由から、使用
Vision APIとは Google Cloud Vision APIはGoogle Cloud Platformが提供する機械学習サービスの1つです。 公式での説明は以下のように説明されています。 Google Cloud の Vision API は REST API や RPC API を使用して強力な事前トレーニング済みの機械学習モデルを提供します。画像にラベルを割り当てることで、事前定義済みの数百万のカテゴリに画像を高速で分類できます。オブジェクトや顔を検出し、印刷テキストや手書き入力を読み取り、有用なメタデータを画像カタログに作成します。Vision AI このサービスを利用するとGoogleが持っている画像に関する機械学習モデルを使って対象の画像から 色々な情報を取得できます。 取得できる情報には以下のようなものがあります。 乗り物や動物など、画像に写っているさまざまなカテ
かつて機種依存文字(環境依存文字)は、OSなどの環境の違いにより文字化けを起こしてしまうため、Webページにおいて使ってはならない文字として扱われていました。 しかし、これは昔のはなし。 実は、WebページがUTF-8などのUnicodeを採用している場合は、機種依存文字(環境依存文字)が問題なく使えます。 今回は、環境依存文字(機種依存文字)と、UTF-8について解説していきます。 機種依存文字(環境依存文字)とは? 機種依存文字(環境依存文字)とは、WindowsやMacintoshなどのOSやフォントの種類などに依存してしまう、ある特定の環境上でしか正常に表示されない文字のことを呼びます。 代表的な機種依存文字(環境依存文字)として、下記が挙げられます。 丸囲みの数字
アンケート調査やお問い合わせ、セミナーやイベント申し込みなどに欠かせない「webフォーム」。今では専門的な知識やスキルを必要とせず誰でも簡単にフォームが作成できるサービスが多く存在します。 今回はその中でも、簡単かつ無料でフォームを作成できる「Googleフォーム」について紹介するとともに、当社のフォーム作成有料サービス「Qubo REQUEST」との比較をしていきます。 Googleフォームは、その名の通り、アンケートやお問い合わせフォームといったwebフォームを簡単に作成できるGoogleのクラウドサービスです。 Googleのオンラインストレージサービス「Googleドライブ」と連携しており、回答データはGoogleスプレッドシート(オンライン表計算ツール / Excelとほぼ同じ機能)に集約され、集計・管理・分析をひとまとめに行うことができます。 Googleドライブ同様に、Goo
前回の記事【初心者向け】CSSセレクタとは?セレクタの種類や指定方法を解説!(基礎編)ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 擬似要素とは ~擬似要素の適用例~ 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。 例として、下図のように見出しの先頭一文字のみ文字の色を変える装飾を実装してみましょう。 擬似要素を使わない場合 擬似要素を使わずにこれを表現すると、HTMLとCSSの記述は下記のようになります。 見出し要素のh2の一文字目のみをspanタグで囲い、スタイルを適用しています。 この方法でも装飾は可能ですが、テキストをspanタグで無理やり区切って
「PREP法」や「PASONAの法則」という言葉を聞いたことはないでしょうか? これらは、読み手の行動を促すコピーライティングやセールスライティングに用いられる文章構成のひな形です。 文章を作成する際には、さまざまな型が用いられますが、これら文章構成のひな型を活用することで、説得力がある魅力的な文章を作成することができます。 そこで今回は、コピーライティングやセールスライティングに最適な6つの文章構成のひな形をご紹介していきます。 PREP法(フレップ法) PREP法はコピーライティングに限らず、文章構成の雛型としてビジネス文書などでもよく用いられます。 結論(Point)、理由(Reason)、具体例(Example)、再結論(Point)の4つの単語の頭文字をとって名付けられ、PREP法を用いることで簡潔で説得力のある文章の作成ができます。
筆者はコーダーとして日々コーディング業務を行っていますが、HTML・CSSコーディングを行う上で一番重要で手間のかかる作業はデザインカンプとコーディングデータを比較する確認作業だと考えています。 今回はこの確認作業を効率よく行うことができるChromeのアドオン「PerfectPixel」をご紹介したいと思います。 コーディングデータを確認する際の基本的なワークフロー 様々なwebブラウザや閲覧端末が普及し、レスポンシブデザインが主流となった昨今ではそこまで厳密にデザインカンプを再現する必要はなくなってきましたが、それでもできるだけデザインに忠実なコーディングを意識することは大切です。 弊社でコーディングデータを確認する際の基本的なワークフローは、 Photoshopでデザインカンプを開く webブラウザで表示したコーディングのスクリーンショットを撮る スクリーンショットをデザインカンプの
画像オブジェクトには「ラスタ形式」と「ベクタ形式」、表現の異なる2種類の形式があります。 この2つの違いを理解しておくと、デザイナーに依頼するときに認識ズレによる作り直しなどを防ぐことができます。また、これからPhotoshopやIllustratorの使い方を勉強する方は、必ず理解しておきたい基礎知識です。 今回は「ラスタ形式」と「ベクタ形式」がどのようなときに活用されるのか2つの違いを簡単に解説します。 1pixelの点が縦横と格子状に並び構成されたデータをラスタ形式といいます。 この形式は「ビットマップ画像」とも呼ばれます。 濃度が違う点や様々な色の点を多く並べることで複雑な画像を表現することが可能ですが、点が増えるとその分データサイズが大きくなってしまいます。 皆さんにも馴染みのあるスマフォのカメラ・デジカメで撮影した写真のデータはこのラスタ形式です。 写真の一部をよく見てみると点
【Webマーケティングの基本】4つのSNS広告(Facebook,Twitter,Instagram,LINE)を理解しよう! FacebookやTwitter、Instagram、LINEなどSNS(ソーシャルネットワーキングサービス)が急速に普及し、日本国内におけるSNS利用者は7,000万人を超え、2019年末には7,732万人まで拡大するとの調査結果※が発表されています。 ※2017年度 SNS利用動向に関する調査(株式会社ICT総研)より また、利用者の拡大に合わせてWebマーケティングツールとしても注目され、様々な企業がSNS広告を活用しています。今回はこのSNS広告について、これからWebマーケティングの手段として活用を考えている方に向けてご紹介しています。 SNS広告とは 今更説明することでもありませんが、SNSとはソーシャルネットワーキングサービスを省略したもので、多くの
2018年の出版市場規模は「1兆5,400億円(紙の書籍:1兆2921億円、電子書籍:2479億円)」と、まだまだ紙の市場が大きい状況です。ですが2017年と比較して、紙の書籍は5.7%減、電子書籍は11.9%増となっています。電子書籍の内訳は、「コミック:1,965億円、書籍:321億円、雑誌:193億円」と、コミックが圧倒的です。 参考URL:https://www.ajpea.or.jp/information/20190125/index.html(公益社団法人全国出版協会) 電子書籍ストアの内、Kindleのシェアが最も大きく、ほぼすべてのジャンルの書籍を扱っています。 筆者の場合、Kindle専用端末で書籍中心に利用しており、Kindle専用端末の読みやすさ、持ち歩きやすさを考えると、もっと普及するポテンシャルを持っていると思います。 一方、出版する側で考えてみると、紙の出版と
CSSとは正式にはCascading Style Sheets(カスケーディング・スタイル・シート)といい、webサイトにデザインを施すための言語です。HTMLとセットで扱われ、HTMLで記述した文章構造を装飾し見栄えを良くする役割を担っています。 今回はCSSを記述する際に必要となる「セレクタ」について解説していきます。 CSSセレクタとは(HTML・CSSの基礎知識) CSSはHTMLに記述された指定の範囲または要素に対して装飾を施します。そして、CSSによるデザイン指定をどのHTML要素に適用させるかを指定するのに用いられるのが「CSSセレクタ」です。 HTMLの構造 CSSを理解する前にまずHTMLがどのような仕組みで記述されているかを理解しておく必要があります。 HTMLはタグと呼ばれる記号で構成されています。 タグには一般的に開始タグと終了タグがあり、記述をタグで囲むことにより
CMSを導入するメリット 更新作業の内製化により、コスト削減やスピーディーな情報発信を実現できる 専門知識や技術を必要とせずにwebサイトを更新できるため、社内の広報担当者やweb担当者自身が簡単に情報発信することができます。これにより、制作会社に更新作業を依頼する必要がなくなるため、外注コストの削減や、スピーディーな情報発信を実現できます。 サイトの更新頻度を高めることができる webサイトの更新が簡便化されることにより、社内リソースさえ確保できれば、外注コストを気にすることなく頻繁に更新することができます。タイムリーな情報発信は、見込み顧客への訴求力やユーザー満足度を高め、より効果的なwebサイト運営へとつなげることができます。 また、更新頻度が上がることで、コンテンツが充実し、間接的にSEO的な効果も得ることができます。 インターネット環境とブラウザさえあれば更新できる CMSはイン
白銀比(はくぎんひ)と呼ばれるものは以下の2つがあり、いずれも無理比である。 1. 1:1+√2の比。貴金属比のひとつ(第2貴金属比)。 2. 1:√2の比。その という性質から、紙の寸法などに用いられている。Wikipedia:白銀比 と書かれていますが、日本では「2. 1:√2の比。」として知られており、別名「大和比」とも呼ばれています。 学生時代に、√2≒1.41421356(一夜一夜に人見頃)の語呂合わせを使って記憶された方も多いかと思いますが、 1:√2は、1:1.414(約5:7)を表す比率です。 白銀長方形とは? 黄金比の黄金長方形のように、白銀比にも「白銀長方形」と呼ばれるものがあります。 縦と横の比率が1:1.414の白銀比となっている長方形です。 白銀長方形は下記の方法で描くことができます。
2016年4月に施行された「障害者差別解消法」により、公的機関のみならず多くのWebサイトでもウェブアクセシビリティの確保や向上が必要とされています。 ウェブアクセシビリティへの取り組みを行う上で欠かせないのが、ウェブアクセシビリティ規格「JIS X 8341-3:2016」です。 今回は「JIS X 8341-3:2016」について、最低限知っておくべきことを解説していきます。 JIS X 8341とは? そもそもJIS X 8341は、日本工業標準調査会(JISC)が制定した、情報通信における機器、ソフトウェアおよびサービスの情報アクセシビリティを確保・向上するために、企画・開発・設計者および経営者が配慮すべき具体的な要件がまとめられた標準規格です。 情報アクセシビリティとは高齢者・障がい者等が、情報通信における機器、ソフトウェアおよびこれらによって実現されるサービスを支障なく操作また
制作会社にwebリニューアル(またはwebサイト構築)を依頼する場合、多くの段階とタスクを踏み、webサイトの規模によりますが、通常3ヶ月~半年ほどかけて完成を目指します。企業・団体のプロジェクト担当者は、通常業務と掛け持ちすることが多く、“効率よく”成果を出せるwebサイトを構築したいという想いをお持ちではないでしょうか。 そこで今回と次回の2回にわたり、円滑で効果的なwebサイトを構築するための基礎知識として、webサイト構築プロジェクトの流れをご紹介していきます。
次のページ
このページを最初にブックマークしてみませんか?
『ユーザビリティに配慮したホームページ制作・コンサルティングのアーティス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く