はてなブックマーク

Googleが公開している「Lighthouse」というツールをご存知でしょうか。 Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。サイトのパフォーマンス、アクセシビリティ、プログレッシブ ウェブアプリ（PWA）対応状況などについての確認でき、サイトの品質を向上させるための具体的な対策を提示します。デベロッパーの皆様が「暗礁に乗り上げないようにする」ことを目的としているため、「Lighthouse（灯台）」と名付けられました。 （参照） https://webmaster-ja.googleblog.com/2018/02/seo-audit-category-in-lighthouse.html 平たく言えば、あなたのウェブサイトのパフォーマンスを測定しますよ系のツールの一つです。PageSpeed Insights や、モ

GoogleドライブにOCR機能があることを皆さんご存知でしょうか。 先日社内で「GoogleドライブのOCR機能の精度が凄いから使ってみて！」という情報が回ってきましたので、どれどれ本当に使えるかどうか試してみようじゃないかというのが本エントリーの趣旨でございます。 ↓OCRについて知らない方は、 光学文字認識（OCR）とは 光学文字認識は、活字の文書の画像を文字コードの列に変換するソフトウェアである。一般にOCRと略記される。OCRは、人工知能やマシンビジョンの研究分野として始まった。 ちなみにOCRの技術が向上することで、お客様から頂いたあらゆる資料を一瞬でデジタル化し、保存できるようになるのですから、画期的です。 私たちはホームページ制作を普段からご依頼いただくことが多いのですが、例えば”代表者様の挨拶”をパンフレットから引用するような際、「これを見ながら書き起こしたら良いと思いま

【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介 シェア つぶやく ブックマーク LINE Pocket 「どうせなら100点にしようよ！」というお声が聞こえてきそうですが…。 それはさておき、最近ではページの表示速度がこれまでよりもより重要視されていて、PageSpeed Insights を活用する方も増えてきています。WordPressは動的なCMSということもあり表示速度があまり速くありませんので、 キャッシュプラグイン 画像の軽量化 上記のような工夫をしてらっしゃるのではないでしょうか。 ですが、PageSpeed Insights で注意されがちな項目はそれだけではありません。 スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

2017年6月23日にGoogleマイビジネスに「投稿」機能が追加されましたね！お客様から「どのように活用したらいいの？」というお声が多かったので、投稿機能の活用方法と投稿方法をご紹介します。 目次 （1）Googleマイビジネスの「投稿」機能でできることは？ ・「投稿」の表示はGoogleの検索結果画面 ・Googleマイビジネス投稿のメリット （2）「投稿」機能について ・「投稿」は1週間以内の投稿内容のみ ・「投稿」の表示方法は2種類 ・「投稿」の種類は5つ ・日付を限定することができるイベント機能 ・「投稿」が表示されるのは社名・店舗名検索のときだけ （3）Googleマイビジネスの投稿方法・使い方 Googleマイビジネスの「投稿」機能でできることは？ Googleでは下記のように紹介されています。 Google マイビジネスの「投稿」機能では、自社のイベント、商品、サービスなど

STUDIOって？ 「サービスづくりのための、次世代デザインツール」というキャッチコピーの通り、次世代のデザインツールとして界隈で注目されている、ブラウザで動くウェブサービスです。今回は実際に試してみた感想をウェブ制作会社目線でお伝えできればと思います。 さて、どんなところが次世代かと言いますと、一番は「デザインがそのままプロダクトにできる」というところではないでしょうか。現在はまだ実装されていませんが、将来的にHTMLやCSSが排出される機能も予定しているみたいです。なので一周回って、ホームページビルダーのようなイメージに近いのかもしれません。 ウェブ制作会社目線ですと、ワイヤーフレーム作成や、もう一歩進んだプロトタイプの作成に向いているのではないのかな、と。どのようなツールなのかは、公式の動画をご覧になるとざっくりどのようなツールなのかわかってもらえると思います。 ちなみに完全日本語対

今年も新卒採用が活発になる時期が近づいてきましたね。2018年3月1日より企業は説明会を開始し、6月1日より本格的な選考がスタートします。少子化が進む関係もあり、またダイバーシティーを求める企業の動きも活性化しており、新卒採用の競争は年々激化している印象です。 弊社でも新卒採用サイト制作のご相談をいただく機会は年々増加しており、ホームページを活用した新卒採用の戦略も、各企業が高い温度感を持って臨んでいることが伺えます。 私たちのホームページ制作サービスについて詳しく知りたい方は下記リンクよりご覧ください。 →東京渋谷・名古屋のホームページ制作会社「ウェブ企画」 今年のトレンド 毎年のように変化するウェブデザインやコンテンツのトレンドですが、まずは最近の採用サイトのトレンドについておさらいしましょう。 スマホを意識したパネル型（フラットデザイン）、全画面型 就活生が利用する主なデバイスがスマ

追従型のナビゲーションについて少し調査する機会があったので、ついでにまとめてみました。追従型のナビゲーションにメリットデメリットあるところだとは思いますが、ウェブサイト制作のヒントにしてもらえればと思います。 ヘッダーがまるごと追従するパターン https://www.toumeihouse.com/ シンプルにヘッダーがそのまま追従してくるパターンです。ヘッダーのサイズが大きければ可視領域が少なくなってしまいますので、その点が心配ではありますがユーザが最初に見たメニューがそのままついてくるので迷うことなく利用できるのはメリットと言えるでしょう。 メニューが小さくなって追従するパターン https://daiei-ironworks.co.jp/ スクロールをするとヘッダーのメニューが少しサイズ縮小され、可視領域を広げるパターンの追従ナビゲーションメニューです。先ほど紹介したヘッダーが丸ご

私たち制作会社の人間がお客様にもっともよく聞かれる質問の一つに「ホームページの見積もりをしてみたら驚くような安さの会社から、びっくりするくらい高い値段の会社もある。その違いは何なのか。」という質問があります。 この質問をされること自体、まだ業界が未成熟である証拠だなと感じるわけなのですが、それは置いておいて、どうして安いのか高いのかについて今回は考えてみました。 ちなみにどうして高いのか安いのかの理屈をうまく説明できない人は、業界の人でも意外と多かったりします。 Web制作は何にコストがかかっているのか Web制作に設備投資はほとんど必要ありません。制作会社を構えるオフィスに、パソコン、そしてPhotoshopなどホームページを制作するためのソフトウェアくらいしかありません。（それでもフォントなど全て完璧に揃えると結構な維持費となるのですが…） となると何にコストがかかるのか。 正解は人件

目次とは 目次とはページの見出しにページ内リンクをするような形で、見出しをリスト化したものです。既に見かけたと思いますが、当サイトの目次は下図のように表示しています。 ブログ記事に目次を付けるメリット ユーザーの利便性を高める 幼い頃から誰もが小説や教科書など、自然と目次を利用しているはずですので、その存在意義については言わずもがなかと思います。 しかし紙媒体では一般的でも、ブログとなると「目次」を全ての管理者が用意してくれているわけではありません。元々ブログは日記のようなものとして広まってきたという背景もあってか、もしかすると「ブログ＝本」といった認識になっていないのかもしれませんね。日記にわざわざ目次を付けたりはしませんから。 しかし企業が発信するようなブログのように、ノウハウなどについて発信する場合は、テキスト量が増えることが多く、そういった際には目次があるとユーザーにとってブログを

2017年も終りが近づいてきましたね。一年のまとめということで、2017年に起こったSEOに関するニュースをまとめてみました。うっかり見逃していたニュースが無いか、復習がてら一度ご覧になってみてください。 ※テスト中の機能については掲載していません ※マニアックすぎるニュースや、SEOに直接的には関わっていないニュースについては割愛しています（マット・カッツさんの退職など…2016年末ですが。） １月 検索結果にAMPのカルーセル表示を開始 検索結果に下の図のようなイメージでアンプサイトをカルーセル表示するようになりました。ニュース系のサイトは今まで以上にサムネイルに気をつける必要が出たのではないでしょうか。 Yahoo経由の検索流入のクエリもほぼ取得不能に これまでYahoo!からの流入は一部クエリは取得可能だったのですが、ほぼ100%の割合で not provided になりました。検

Adobe XD ってどんなツールなの？ UI/UXデザイナーのためのプロトタイプ作成ツールです。数年前までのようなパソコン用デザインだけを作成すれば良いような環境でしたら Photoshop や Illustrator で間に合っていたのですが、スマートフォンのデザインが必要になり、さらにアプリのデザインも必要になってきた時代の変化に合わせ、よりスピード感をもってプロトタイプを作ることの出来るツールとして登場しました。 とくかく速くて、軽くて、直感的に操作できるようになっていますので、ワイヤーフレームの作成にもピッタリというわけです。 特徴的な機能 Adobe XD にはいくつか特徴的な機能が用意されています。これから紹介する機能をご覧いただければワイヤーフレームの作成に役立つことをご認識いただけるのではないでしょうか。 アートボード Adobe XD は Illustrator のよう

「ウェブサイトのアクセス数が下がっているから原因を調べて欲しい」というシーン、ありますよね。インハウスの担当者の方など、慣れていないアクセス解析を頼まれてお困りのことなどないでしょうか。そこで今回はアクセス数が下がった場合に、Analytics（今回はSearchConsoleも併用）を使い、どのように原因を調べたら良いのかを基本的な分析方法をご紹介いたします。 「特定の日」が無いかを確認する 直近一ヶ月程度の比較であれば、まず最初に確認することがあります。それは「特定の日だけ大きく減少していないか」です。もし存在していれば、原因の特定は簡単ですよね。その日にサーバーが落ちていたり、一日だけ広告をストップしていたりなど、「その日何があったか」を関係者に確認することで多くの場合は解決するのではないでしょうか。 しかしそれが無く、全体的に落ち込んでいる場合は、いよいよ細かく調査する必要が出てき

先日「爆速に Adobe XD でワイヤーフレームを作ってみよう！魅力的な機能や高速化のコツをご紹介！」という記事を公開いたしましたが、その中でもご紹介したように、ワイヤーフレームは予めパーツを作っておくと早く制作することができます。 そこで今回は、ワイヤーフレームの作成に役立ちそうで、且つクオリティの高いキット（素材）をご紹介いたします。ご紹介するものは全て無料です。 無料で高品質なワイヤーフレーム素材をご紹介 Wires, free wireframe kits for Adobe XD https://www.behance.net/gallery/55462459/Wires-free-wireframe-kits-for-Adobe-XD もっともパーツの数が多く、クオリティの高いワイヤーフレームのキットです。ファイルはスマホとPCに分かれています。ボタンやサムネイルのパーツだけ

Googleリーダーが2013年7月1日でサービスを終了して依頼、３年近くfeedlyを愛用してきましたが、最近試してみたinoreaderがあまりにも快適だったため、一瞬で乗り換えてしまいました。 過去にも様々なRSSリーダーを試しては消し、試しては消してきましたが、やっと一番使いやすいRSSリーダーに出会えたなという気持ちです。 そこで今回はinoreaderをまだ試したことが無いという方に向けて、魅力をたっぷりとお伝えできればと思います。 ＜目次＞ 1. アプリからもウェブブラウザからも！ 2. 日本語対応 3. インポート・エクスポート対応。もちろんFeedlyからの乗り換えも可能！ 4. フィルタリング機能が凄い 5. 既読の方法も豊富 6. キーボードショートカットも 7. 複数アカウントの購読も可能（アプリのみ） 8. リストビューで完全なタイトルを表示 9. 記事の表示方法

運営しているウェブサイトの順位、皆さん気になりますよね！順位を知るだけであれば Googleのサーチコンソールを利用することで簡単に解決します。しかし下記のようなニーズの場合、サーチコンソールを利用するよりも検索順位チェックツールを利用する方が利便性が高いことがあります。 競合ウェブサイトが特定のキーワードで何位なのか知りたい 特定ウェブサイトが特定のキーワードでどのような順位変化をしているのか知りたい YahooとGoogleとでの順位差を知りたい 今回は、検索順位チェックツールを一挙にご紹介したいと思うのですが、検索順位チェックツールは大きく二つに分けられます。 一つはブラウザ上で会員登録などを行わずに簡単にチェックすることができるツール。とにかく手軽に順位をチェックすることができますので、急ぎの場合や、とりあえず…の際に利用するのがおすすめ。 もう一つはパソコンにインストールをしたり

【拡散率アップ!?】ブログに「記事タイトルとURLコピーする」だけのボタンを実装したら色々便利でした！ シェア つぶやく ブックマーク LINE Pocket この記事をご覧いただいた方の中には既にお気付きの方もいらっしゃると思いますが、「この記事のタイトルとURLをコピー」するボタンを実装いたしました。 一度試すとスグにわかりますが、単純に「記事タイトルとURLをコピー」するという、たったそれだけのボタンです。しかしとても便利なボタンを実装したのではないかと考えています。特にブログ運営者の方は、きっと拡散の手助けとなる（？）オススメなボタンです！ なぜこのボタンを作ったのか とある10代後半〜20歳前半の女の子をターゲットとするクライアント様へのリニューアルの提案時にソーシャルボタンはあったほうがいいかどうか、といったことが社内で議題に挙がりました。 記事を少しでもシェアしてもらうために

※基本的にはパソコンを使っての移行しか出来ません まずfeedlyのRSS情報をエクスポート まず、feedlyへログインをしてください。 https://feedly.com/ ログインした状態で下記URLへアクセスします。 http://cloud.feedly.com/#opml 下の画像のような画面へと移行しますので「Click here to download your feedly OPML」をクリックしましょう。 feedly.opmlというファイルがダウンロードされるはずです。これでエクスポートは完了です。 inoreaderにインポートしよう http://www.inoreader.com/ 次に、先ほどダウンロードしたファイルをインポートするためにinoreaderへログインをしてください。 ログイン後、右上の設定アイコンをクリック。そして「設定」をクリックしてくださ

突然ですが、みなさんは時間管理をしていますか？ ホームページ制作にかかる費用はWebデザイン・コーディング・ディレクションなどの作業時間。つまり作業者の「時給」がほとんどを占める事になります。自分がどの作業にどれだけ時間をかけたかを把握するのは大切なことです。 でも作業の時間を正確に把握するのは難しいもの…一日忙しくてあっという間に過ぎてしまったけど、振り返ると何をしてたかよく分からない…なんて経験はだれもが一度は経験したことがあるのでないでしょうか？(私はたくさんあります) ということで作業時間を計測するべく、いろいろなツール・サービスを試した結果、今は「Toggl」というサービスに落ち着きました。 今日はこの時間計測サービス「Toggl」についてご紹介します。特に「これから時間計測始めてみようかな…」と思っている時間計測の初心者さんにおすすめできる内容となっています。 それでは早速いっ

「Accelerated Mobile Pages」と呼ばれるGoogleが推し進めてきたプロジェクトですが、とうとう正式導入されることになりました。「Accelerated」は「加速される」という意味で、つまりモバイルページ高速化プロジェクト、といったところでしょうか。 まずは導入後のイメージを御覧ください。（英語ですが公式サイトのイメージよりもわかりやすいです） このように、検索結果にカルーセル形式で表示され、リンクをタップすると物凄いスピードでページが表示されます。 自分の携帯で試してみたい方は、下記URLのGoogle検索画面から「ニュース」というキーワードなどで検索してみてください。 http://g.co/ampdemo（※スマホからアクセスしてください） 既にTwitterやアメブロなど、様々なメディアがAMP対応を導入しています。 Googleが過去に発表してきた、モバイル

WordPressで固定ページなどで投稿すると自動で文章を整形するタグ＜br＞や＜p＞などが勝手に入ってしまい困ってしまったことはありませんか？最近このWordPressの自動整形を制御する方法を先輩に教えてもらったので、ついでに制御方法を色々調べて記事にしてみました！ WordPressで自動生成されるタグを制御する方法 調べてみたら色々な制御方法があることが分かりました。ケースによって使い分けるのが良いかと思います。また、今回はプラグインを使わない方法のみの紹介になります。 全ての投稿に実装する場合 まずは全ての投稿の自動整形を無効にする方法です。functions.phpに下記のコードを記述するだけで実装可能です。 functions.php remove_filter('the_content', 'wpautop');　// 記事の自動整形を無効にする remove_filter

Yahooプロモーション広告では「リターゲティング広告」、GoogleAdWordsでは「リマーケティング広告」と呼ばれる広告ですが、今やインターネットマーケティングでは欠かせない存在になっている広告手法です。（呼び方が２つあると紛らわしいので、この記事ではリターゲティング広告に表記を統一して説明いたします。） この記事では、リターゲティング広告についてよく知らない方に向けて、その重要性や広告の始め方など、基礎から運用・活用方法まで、あますことなく解説していきたいと思います。 この記事で紹介する内容 もくじ リターゲティング広告の基礎 リターゲティング広告ってどんな広告？ WEB集客においてリターゲティング広告が重要な理由 リターゲティング広告の開始手順 リターゲティング広告はどうやって始めるの？ １，タグの発行と貼り付け ２，ターゲットリストを作成する ３，広告の配信設定 リターゲティン

ウェブマーケティング手法を活用したホームページ集客方法から、 ウェブ制作ノウハウまで幅広い情報をお届けするブログです。

2015年8月にWEB企画は名古屋オフィスを移転しました。より質の高いデザインやコンテンツを提供するため、新しいオフィスではデザイナーがクリエイティブな環境で働けるよう内装に多くの工夫を盛り込みました。 移転してから「見学に行きたい！」というお声も多くいただきましたので、今回は新オフィスをご紹介します！ 来訪者をお出迎え☆エレベーターホール IT名駅ビル2号館のエレベーターで3階に上がるとWEB企画のロゴがお出迎え。エントランスへとお向かいください。 中の様子が見えるエントランス エントランスはガラス張りで、執務室の様子を垣間見ることができます。ご用の際は、内線のお電話でスタッフにお申し付け下さい。 楽しいアイデアを生み出す会議室 よりリラックスした環境でお打ち合わせが出来るよう、堅苦しくない雰囲気の会議室がコンセプト。カラフルなチェアで楽しい雰囲気を演出しています。 特注サイズのホワイト