2020.06.16 WEBWebデザイン CSSでアニメーションを作るには？CSSアニメーションの作り方（基礎編） 最近ではアニメーションを使用しているwebサイトが多くなりました。 要素の色や形を変化させたり、移動させたりすることで、動きのある華やかな印象を与え、より直感的に情報を伝えることが出来るアニメーション。 そんなアニメーションをCSSだけで表現する方法を、今回解説していきます。 INDEXCS [...]
2020.06.16 WEBシステム開発 WSL2のDebianにAnsibleの最新版をインストールする ついにWindowsの「May 2020 Update」が配信され、待ちに待ったWSL2が使えるようになりました。Preview版ではなく正式なリリースとなったので、さっそく会社のPCもHyper-VからWSL2に移行しました。 WSL2にはいくつかのディストリビューションを選択できますが、今回は [...]
2020.06.11 WEBWeb全般 【YouTube】webサイトに動画を埋め込む方法は？レスポンシブデザインに対応した埋め込みタグをご紹介！ 昨今、多くの企業や組織が自社のマーケティングチャネルとして「YouTube」を活用しています。 YouTubeにアップロードした動画をユーザーに閲覧してもらう方法として、自社のwebサイトへ動画を埋め込むニーズが増えてきています。 そこで本記事では、webサイトにYouTube動画を埋め込む方 [...]
2020.05.29 WEBアクセス解析 無料で使えるBIツール「Googleデータポータル」使ってアクセス解析レポートを自動化してみよう【基本編：グラフ設定】 前回の導入編では、Googleデータポータルの導入からレポート作成、共有までの流れを説明しました。 基本編では、レポートに配置できるグラフの種類と設定方法について解説していきます。 レポートに追加できるグラフの種類 Googleデータポータルでは、32種類のグラフが用意されています。 表 [...]
2020.05.28 WEB教育機関ウェブサイト 大学WebサイトのレスポンシブWebデザイン・常時SSL対応状況【関東エリア（東京・神奈川・千葉・埼玉）】 前回のブログで東海エリア（静岡・愛知・岐阜・三重）の大学webサイトにおけるレスポンシブwebデザインと常時SSL対応状況について書きましたが、今回は関東エリア（東京・神奈川・千葉・埼玉）の大学webサイトにおけるレスポンシブwebデザインと常時SSL対応状況ついて調査しました。 参考ブログ大学W [...]
2020.05.25 WEBWeb全般 自分だけの地図を作って共有できる！Googleマイマップ ～オリジナルMap作成編～ Googleマップの機能の一つに、「Googleマイマップ」というものがあります。 Googleマイマップは通常のGoogleマップを使って、オリジナル地図を作成できるサービスです。複数の場所を地図上で簡単にマーキングでき、メモやルートと一緒に保存しておける機能があります。 旅行用の「観光マップ」 [...]
2020.05.13 WEBWebマーケティング OGP画像を設定しよう！Facebook・Twitter・はてなブログ・LINEの最適な画像サイズとは？ OGPとは「Open Graph Protocol」の略称です。 FacebookなどのSNSでwebページのURLがシェアされた際に、シェアした人のタイムラインにページタイトル・URL・概要・画像を表示させる仕組みのことを指します。 OGPを正しく設定することで訴求力が高まり、SNSからの訪問者 [...]
2020.05.07 WEBシステム開発 Windows 10 Insider Previewに参加して「WSL2」をインストールする方法 2020年3月13日に「Windows10 version 2004」でWSL2がGAになるとアナウンスがありました。 WSL2 will be generally available in Windows 10, version 2004 記事執筆時の2020年4月30日では、まだ「Wind [...]
2020.04.27 WEBWebデザイン 【Photoshop】レイヤーマスク、クリッピングマスクの違いを理解して作業効率をアップしよう！ Photoshopにはいくつかマスク機能があり、その中でも今回は「レイヤーマスク」と「クリッピングマスク」をご紹介しようと思います。 Photoshopのマスクとは、「画像の切り取り」ではなく「画像を隠す」機能です。 元の画像に手を加えず、上からマスクをかぶせているイメージです。 そのため、後か [...]
2020.04.27 WEB教育機関ウェブサイト 大学WebサイトのレスポンシブWebデザイン・常時SSL対応状況【東海エリア（静岡・愛知・岐阜・三重）】 以前のブログで病院webサイトにおけるレスポンシブwebデザインと常時SSL対応状況について書きましたが、病院webサイトと同じく、弊社で数多くサイトリニューアルのお手伝いをしている大学Webサイトについても調査を行いましたので、結果をまとめたいと思います。 参考ブログ 病院webサイトのレスポ [...]
2020.04.17 WEBWebデザイン positionプロパティを身に着けよう！stickyの仕様と使い方を解説！ 前回の記事positionプロパティを身に着けよう！基本的な知識と使い方を解説！（基礎編）ではpositionプロパティにおける4つの値について解説しました。 今回はこれらの値全てと類似点を持つposition: sticky;に関して解説していきます。 INDEXposition: s [...]
2020.04.16 WEBWebデザイン Dreamweaver CCでSassを使ってCSSファイルをコンパイルする（CSSプリプロセッサー機能） 弊社ではHTMLやCSSのコーディングを行うスタッフの大半がDreamweaver CCを利用しています。コードスニペットやテンプレート機能、サイトの管理などweb制作に必要な機能が一通りそろっている高機能なエディタですが、Dreamweaver CCを利用してる理由の1つに「CSSプリプロセッサ [...]
2020.04.09 WEBアクセス解析 Google アナリティクスに他のユーザーを招待してアクセス状況を共有する方法（ユーザー管理） Googleアナリティクスに複数人がログインしてアクセス状況を確認したいということがあるかと思いますが、個人情報保護やセキュリティ上、1つのGoogleアカウントを複数人で共有することは望ましくありません。 そもそも Google アカウントは複数人がパスワードを共有して使うことを想定していま [...]
2020.03.24 WEBWebデザイン 【Photoshop】画質を落とさずノイズを軽減できる「Camera Rawフィルター」の使い方 高感度で撮影した写真は、ザラザラとしたノイズが見えることがあります。 画質を落とさずノイズのない綺麗な画像を作るには、Photoshopの「Camera Rawフィルター」がオススメです。 どうしても使いたい画像のサイズが小さく、引き伸ばさなければいけないときであっても、ギザギザした質感を緩和す [...]
2020.03.18 WEBWebデザイン 公式テンプレートを使ってAdobe XDのプラグインを自作してみよう ～starter project導入編～ 弊社ではwebデザイン作成前のプロトタイプを構築する際にAdobeXD（以下XD）を利用する機会が増えてきました。 XDは軽量・シンプルで使い勝手の良いツールなのですが、機能が限定的で痒い所に手が届かないこともしばしば。。。 そのような時に「何か良いプラグインはないかな」とインターネット等で検 [...]
2020.03.12 WEBWeb全般 ブログに文章や記事を“引用”するときのルールや書き方を知っていますか？ ブログやオウンドメディアで記事を執筆する際に、他サイトにある文章を引用することがあります。 引用には「引用するために必要な条件」があり、その条件を満たしていない場合、著作権侵害として罰則の対象になる可能性があります。 著作者とのトラブルを起こさないために、「引用」のルールを正しく知り、ブログや [...]
2020.03.12 WEBシステム開発 GoogleCalendarAPIを利用して、PHPでGoogleカレンダーの情報を取得してみよう！（予定編） 前回はGoogleの提供している日本の祝日カレンダーから祝日データを取得してみました。 今回は以下の2種類の方法で、自分のGoogleカレンダーの予定を取得してみようと思います。 カレンダーを公開し、前回同様APIキーを用いて取得する（方法1） サービスアカウントを用いて、認証でカレンダーを取 [...]
