今回の投稿はWebサイトの作り方についての個人的なまとめの続編でございます。 これまでご説明してきた内容はWebサイトの作り方に関するデザインの具体例ではなく、Webデザインのあり方を元にWeb制作の考え方に寄ったお話しでした。 https://www.webproduct-lab.com/entry/webdesign-process-design https://www.webproduct-lab.com/entry/webdesign-process-design-2 具体的な例もわかりやすくて良いと思いますが、そもそもの概念を知った上でサイト制作をしなければ次に繋がりませんからね。 どうやったらうまく表現できるのか？ということを常に考えていると「こういうことか！」といった“ひらめき”に辿り着くこともあります。そんな私もデザインに15年以上も携わっていて未だに考え続けています。。

みなさんPing送信してますか？ はてなブログにはPingを送信する設定がありません。 通常のブログ管理だと必要ないと思いますが、ランキングサイトなどを利用する場合はPingを送らないと更新情報を素早く伝えられない場合があります。 そういった場合、はてなブログの場合は手動で更新情報を送る必要があります。 これって記事を更新する度に発生する作業なので意外と面倒なんですよね。。 そこで今回はIFTTTというWebサービスを使ったPing送信を自動で行う方法についてご紹介してみたいと思います。 IFTTTは他にも様々な活用方法がありますので、ぜひ参考にしてみてくださいね！ IFTTTの使い方 まずは、はてなブログで投稿した際にPingを送る設定をIFTTT（イフト）を使って行ってみたいと思います。最初に下記サイトからアカウントを作りましょう。 ifttt.com NewAppletから新規アプレ

アイコンフォント使ってますか？ 私はウェブアイコンフォントと言えばこちらの記事で紹介しました「Font Awesome」を個人的によく使っています。簡単だし使っている方も多いのではないでしょうか？ https://www.webproduct-lab.com/entry/how-to-use-fontawesome しかし、たまにここには用意されていないアイコンを使用したい時があります。 はてなブックマークのアイコンなんかも実はないんですよね。。 それで他のアイコンフォントを探してみて良いなと思ったのが今回ご紹介する「IcoMoon」というアイコンフォントです。 と言ってもこちらにもはてなブックマークのアイコンがないんですが…このアイコンフォントは簡単に設置することができる上にオリジナルのアイコンフォントをインポートして使用することもできちゃうんです！ では今回はアイコンフォント「IcoM

つい先日（6月13日）、はてなブログの記事下に「関連記事」が表示されるようになりました。 関連記事と言えばMilliardやGoogleの関連コンテンツなどを利用して自身で用意している方も多いかと思います。 そのため必要ないという方も多いのではないでしょうか？ 私のブログでも表示されていたので少し調べてみました。 結果を言うとOFFにしたんですけどね。。 では、今回は記事下に表示されるようになった関連記事などについてお話していきたいと思います。※内容は、はてなブログに関してのものとなります。 はてなブログの関連記事について 今回表示されるようになった関連記事には、サムネイル・日付・タイトル・ディスクリプションが最大5件一覧表示されます。 その内タイトルとディスクリプションは文字数制限が設定されています。 関連記事のメリット そもそも関連記事は訪問してくれたユーザーに対して他のページも見ても

先日、ハリネズミのインスタグラムを公開したところ3日程度でアカウントがなぜか停止となってしまいました。。 インスタグラムのアカウントが停止されたという記事はたまに見かけてはいましたが、まさか自分のアカウントが停止されるとは思ってもいませんでした。。 そこで今回はインスタグラムのアカウントが停止されてしまった時にやったことについてまとめてみたいと思います。 ※後述しますが、今回はアカウントが再開されることがないと思われたので新しくアカウントを作ったんですが、実は再開されていました。。 インスタグラムのアカウントが停止した場合 まず、ログインできなくなります。 そこでアカウントが停止されているとアラートが出ます。 インスタグラムのアカウントが停止される理由 基本、通報によるアカウント停止でしょう。 しかし通報だけでアカウントが停止されることは考えにくいので、そこから何らかの規約に違反していれば

私はデザイン制作に携わって早いもので15年以上にもなります。 そんな私が個人的にWebサイトを0から制作する場合の工程を何回かに分けて少しずつご説明したいと思います。 まずはサイトのデザインをどうするか？という点ですが、昔コーディングしながらデザインを進めると言っていた方がいて驚いたことがありました。 もちろん私は画像から作り込んでいくんですが、使用するソフトはいつも決まってPhotoshopです。 IllustratorやFireworksを使う方もたまにいますが、私はエフェクトや使用感の違いからかずっとPhotoshopでデザインを進めています。 これに関してはやりやすい方で良いんじゃないでしょうか？ 写真の補正なんかも一緒に作業できちゃいますからね。Photoshopが個人的にはおすすめです。 では今回は私が行うWebデザイン作成の過程のメインデザイン作成についてご紹介したいと思いま

Neewerのストロボについて 中華系のメーカー「Neewer」のストロボは数種類あり、一番安い「TT560」は3,000円程度で買えちゃうから驚きです！ そしてホットシューの付いたデジカメなら取り付けて発光することができるようです。私はペンタックスですが普通に使えました。（購入検討の際は念のため商品ページ等ご確認ください） しかもバウンス調整が上下0～90°、左右0～270° 動かせることから、光ってバウンスできれば何でも良いなら個人的にこれで充分なストロボです。 今回、私が購入したのはこれのひとつ上位モデルの「NW561」という機種です。 TT560との違いはほとんどなく、液晶パネルが付いたくらいでしょうか？液晶パネルは個人的に欲しかったのでこれで充分です。そのお値段なんと4,500円程度！安い！ Neewerストロボの内容について Amazonで注文すると2日後くらいに届きました！で

写真の補正に便利なPhotoshopですが、ホワイトバランスを調整したいと思ったことはありませんか？ iPhoneで撮ると基本オートなので思い通りの色にならない場合が多々あります。 さらに、そんな写真をPhotoshopで色補正しようとしてもなかなかうまくいかないんですよね。。ホワイトバランスという項目自体ないし… ということで、今回はPhotoshopでホワイトバランスを調整する簡単な方法についてご説明したいと思います。 ホワイトバランスとは？ ホワイトバランスとは、撮影場所の環境光によって本来真っ白な部分が青っぽくなったり赤っぽくなることで写真全体の色味にも影響してしまうものです。 雰囲気を表現する場合にもあえて青っぽくしたりもしますね。 こちらの写真はこないだ行ってきたホピの丘に行く途中の毛無山展望台からの景色です。 ホワイトバランスを調整する方法 このホワイトバランスをPhotos

以前、2017年にやりたいことについて記事を書きました。 そして最近！その中からひとつ達成することができました！！ このブログなどについて2017年にやりたいこと3連休も終わり、本格的に2017年が始まってしまいました。。 ということで今回は、今週のお題「2017年にやりたいこと」に投稿してみた... この計画は嫁とあーだこーだで話合い、けっこう時間もかかりましたがようやく達成することができたので、今回はその経緯についてまとめてみたいと思います。 何が達成できたかはその経緯をご説明しますのでどうぞ最後までお付き合いください！ ソファを捨てるところからスタート まずやりたいことを達成するためにソファを捨てました。（大型ゴミでたしか1,300円） スタッキングシェルフの購入 そしてそこにご覧の通り、ソファのあった場所に無印のスタッキングシェルフを購入しました（37,000円） この棚は非常に便

こないだ個人間で請求・送金することができる割り勘アプリ「paymo」をご紹介しました。CMも話題を呼んでいるようで大々的にプロモーションを行っていますね。 www.webproduct-lab.com このアプリは1年間で700万ダウンロードを目指しているそうで、実際に使ってみましたが非常に簡単に送金を行うことができます。 そんな中、新たな個人間送金アプリ「Kyash」というpaymoにも似たアプリが登場しました。（法律的なしがらみの関係上、無料送金アプリという前提です。）こちらも規模が大きく10億円もの資金を調達したとの記事も拝見しました。 では今回はこのKyashの使い方などについてご説明したいと思います。 Kyashとは？ 個人間送金アプリのKyashとは相手がアプリをインストールしていなくても登録したクレジットカードでキャッシュを送ることができる（受け取るには結局アプリが必要ですが

先日、下記の記事を拝見しました。 この記事によるとGoogleは、Googleニュースに事実チェックを導入し、その記事の内容についての真偽をユーザーにとって有意義なものとして表示していましたが、それが新たにグローバルかつ検索結果のページにも表示されるというものでした。 jp.techcrunch.com この記事の元はGoogleのこちらの記事に記載されています。 私もGoogle翻訳を利用して記事を確認してみました。 blog.google そして、実は私もこちらの記事でGoogleが記事の真偽が理解できないことが問題だったことを書きました。難しい問題ですが、記事を読むユーザーにとっては重要ですからね。 Googleがコンテンツの真偽までを見極めることができなかったということが大きく印象に残りました。 2017年のSEO 傾向と対策について個人的まとめ2017年、今年のSEOについて個人

サイトやブログを管理していて、テキストの左右に線を引きたい時ってありませんか？ 実はこれCSSで表現することができます。 その方法は何通りかあるようですが、今回は個人的にいつも使っているFlexBoxというCSSを使った方法をご紹介したいと思います。 ちょっとした見せ文字や、見出しなんかに使うと印象が変わりますので、ぜひ使ってみてください。 追加するCSS はてなブログの日付に反映させてみる では、今回ははてなブログのタイトルまわりの日付の部分に線を引くという話で進めたいと思います。 コピペでも反映できますので、クラス名だけ任意で変更して試してみてください！その際には必ずバックアップしておきましょう。 まず、はてなブログの日付にはこちらのクラス名が付与されています。 entry-date date first クラスは半角スペースで複数の要素を指定することができるので、この場合は「entr

先日書いた、Amazonゴールドカードについての記事に、ゴールドカードを持つための年会費を安く済ませる方法をご紹介しましたが、現在は入会特典がありませんでした。 Amazonゴールドカードを持っても良いかもしれない理由先日、Amazonプライムに入会しました。その後も家族で便利に使っています。 https://www.webproduct-lab... なので、まず先にAmazon MasterCardクラシックの方を申し込んでみることにしました。 （再審査が必要となりますが、後でゴールドカードに切り替えできます。） このクラシックの年会費は初年度無料で、翌年から1,350円がかかりますが、1年のうち1回でもカードを使うことで無料となります。 Amazonでカードを作ろうとする方で1年に1回もそのカードを使わない人は恐らくいないと思いますので、実質無料と言っても良いかもしれません。 という

記事のアイキャッチやイメージなどに使用する写真ですが、みなさんは何を使っていますか？ ぱくたそ-フリー写真素材・無料ダウンロードなんかも有名ですが、私は個人的に下記の「写真素材ダウンロードサイト【写真AC】」を使用しています。 ここは無料会員登録を行うだけで、写真素材だけではなく、イラストやシルエット、フォント、年賀状素材なんかも全てダウンロードして使うことができます。 www.photo-ac.com 使用方法についても、ご利用ガイドページに以下のように表記されているため、ブログ運営や、Web制作の素材にも便利ですね。 営利目的で作成される商業印刷物やホームページにも、完全無料のまま自由にご利用いただけます。 ということで、今回はフリー素材についてまとめてみたいと思います。 写真ACは本当に安全なのか？ 完全無料と言いましたが写真ACは一時、ある1枚の写真を巡り、著作権侵害についての問題

検索エンジンの評価基準を考える Googleの検索エンジンは、ユーザーの求める情報を検索結果に表示するために何度もアルゴリズムを更新しています。 そして、今も検索のランキングを決めるために被リンクも重要な評価対象にしているということは、検索エンジンがコンテンツをどれくらい正しく読むことができるのか？ということを考えてみるとわかりやすいかと思います。 コンテンツを評価する項目 まず、クローラーはコンテンツだけでは評価の判断をすることができません。 新規ドメインでいくら内容の良いコンテンツを公開しても、すぐには検索エンジンに評価されないということはもちろん想像つくと思います。 いくらコンテンツが重要といっても、クローラーは人ではないため色々な要素をヒントに内容を評価しようとします。 そのため、見出しタグや関連するキーワードへの内部リンク・外部リンクなどの被リンクをはじめ、その他200以上の評価

みなさん、デジカメやスマホで写真を撮った後はどうしてますか？ ある程度写真が好きな方なら、数多く撮った中からセレクトした後、補正して書き出して保存していると思いますが、今回はその画像をWeb用に書き出す際に最低限やっておきたい写真の補正方法を個人的にまとめてみたいと思います。 写真は、簡単な補正でクオリティが上がります。写真好きな方には特におすすめの補正方法ですので、ぜひ参考にしてみてください。 また、RAW現像に関してはこちらの記事を参考にしてみてください。 デジカメ撮影後のかんたんRAW現像のコツ -個人的まとめ私はデザインの仕事をしてきて、入稿データなどの写真素材の構図を色々と見てきました。すると、自然にデジカメにもハマり、自分でも撮るようにな... 色の補正 写真の補正と聞くとまずは色補正ですよね。 私の場合、色補正はトーンカーブ、またはレベル補正、そして色相・再度の補正でほぼ完結

アナリティクスでユーザーがどこから来たのか？どのページをどれくらい閲覧したのか？など、色々とサイト分析されているかと思いますが、ユーザーのマウスの動きはアナリティクスではわかりません。 この、アナリティクスではどうしてもわからないユーザーのマウスやスクロールなどの動きは「ヒートマップ」と呼ばれるツールで分析することができます。 「ヒートマップ」とは、ユーザーのマウスの動きや目線をサーモグラフィ状で可視化することによって、どこをクリックしているのか？どこまでスクロールしているのか？などがわかるツールです。 そのヒートマップを提供している会社は色々ありますが、無料で始められるものもあるので、ランディングページなどのページ改善の参考などに、試しで使ってみても良いかもしれません。 では、今回はこのヒートマップの中から「User Heat」をご紹介したいと思います。 userheat.com Use

WordPressでブログを構築されている方は本当に多いですよね？ 今更ですが…私も最近、movabletypeから引っ越したりしています。。 そして、WordPressを使用してみるとhead内にrel=”next”とrel=”prev”が自動で書き出されていることに気付きます。 思ったんですが、サイトの運営方法によっては、トップページにブログのような2ページ目、3ページ目といったページ送りが無いサイトもありますよね？ この場合でも、WordPressでは存在しない2ページ目へのrel=”next”を書き出します。さらにその存在しない404などのページがインデックスされている…なんてことがあればSEOから見ても正しく評価されていない可能性も考えられます。 そうならないためにもrel=”next”とrel=”prev”について正しく理解して設置しておきたいものです。 Googleも、複数ペ

プロモーション広告のスポンサードサーチ管理画面で、あまり気にしていなかったのですが、少し前から【スポンサードサーチをご利用中の皆様へ】とお知らせが表示されていました。 biz.marketing.yahoo.co.jp この記事で… 弊社では、2016年春頃に「アドバンスドURLシステム」の提供開始を予定 しています。 「アドバンスドURLシステム」の提供開始に伴い、URL管理方法などにつ いての機能を変更いたします。 と、アナウンスがあり、広告データ移行作業が必要とありましたので、私も出稿しているため、どのように変更になるのか調べてみました。 リンク先URLの入力方法を変更 まず、大きな変更はリンク先の指定方法です。 現在、スポンサードサーチで広告を作成する場合、 表示URL リンク先URL が必要ですが、変更後は… 表示URL 最終リンク先URL スマートフォン向けURL トラッキング

Warning: scandir(/home/webproduct53/webproduct-lab.com/public_html/wp-content/plugins/wp-applink/cache/): failed to open dir: No such file or directory in /home/webproduct53/webproduct-lab.com/public_html/wp-content/plugins/wp-applink/class/class-itunes.php on line 178 Warning: scandir(): (errno 2): No such file or directory in /home/webproduct53/webproduct-lab.com/public_html/wp-content/plugins/w