ホームページ作成日記


多言語化する前に知っておきたいの7つのルール Webサイトのターゲットが国内だけでなく海外にもいる場合、サイトの多言語化をすることはとても大事です。ただし、最初に何の設定もせずに多言語化をしてしまうと、ページがスパム扱いされたりうまくクロールされなかったり、といったトラ ... 続きを読む⇒
Googleのペナルティの種類と解除方法 サイトを運営している人にとって、絶対に避けたいGoogleからの「ペナルティ」。ECサイトでは売上に直接関わる一大事ですし、一度ペナルティを受けてしまうと解除するのは本当に大変です。 運営サイトがペナルティを受けないためにはまず ... 続きを読む⇒
デジタル広告業界で注目を集めているのがDSP広告。しかし、DSP広告が広告枠や媒体の一種だと意外と勘違いしている方も多いのではないでしょうか。そこで、DSP広告DSP広告の基本的な知識やその特徴についてご紹介します。 DSPとは DSPとは、Demand-Side Pl ... 続きを読む⇒
多言語化する前に知っておきたいの7つのルール Webサイトのターゲットが国内だけでなく海外にもいる場合、サイトの多言語化をすることはとても大事です。ただし、最初に何の設定もせずに多言語化をしてしまうと、ページがスパム扱いされたりうまくクロールされなかったり、といったトラ ... 続きを読む⇒
「Googleウェブサイト翻訳ツール」を使ってWebサイトを簡単に多言語化 Webサイトを多言語化する際、Googleでは、自動翻訳ページがスパム扱いされる可能性を指摘しています。このことからも分かるように、できる限りは人の手によって管理された翻訳ページを用意することが ... 続きを読む⇒
少し前から注目されている「インバウンドマーケティング」。Webマーケティングでは主流になりつつある手法です。広告出稿費用をかけず、地道な努力で顧客を獲得するその手法は現在も日々発展しています。そこで今回は、インバウンドマーケティングとは?という基礎知識から実践方法までをご紹介します。 続きを読む 続きを読む⇒
アカウントページとは、フォロワーに向けて配信するメッセージやPRページなどのコンテンツのほか、検索するユーザーにも広く公開できるアカウントページを作成できる機能です。 Webサイトの運営には手が回らない中小規模店舗のオーナーさんも、空いた少しの時間で配信や返信ができます。ぜひ活用してみてください。 続きを読む 続きを読む⇒
Google+ローカルページは削除できない!管理することが大切 Googleで企業やお店を検索すると、右側にGoogle+のローカル情報が表示されることは、多くの方がご存知だと思います。大企業であろうと個人経営の小さな店であろうと、実在の住所を持っていればほとんどの会社 ... 続きを読む⇒
formタグのactionの値を変更するだけでメールフォームを送信できるサービス。しかも、月1000通までは無料で使えます。面倒な登録もいりません。 続きを読む 続きを読む⇒
複数枚の写真の加工をしていると、全体の色調を合わせたいことがあると思います。特にサイトに使う写真であれば、同じトーンで揃えた方がキレイですよね。 トーンカーブやレベル補正を使えば微調整ができますが、「この写真と同じ色調にしたい」というときに便利なのが「カラーの適用」です。 写真加工をしていて、思うようなイメージに仕上がらない、というときには、イメージに合う写真と組み合わせてみるといいかもしれません。 ぜひ、試してみてください。 続きを読む &rar続きを読む⇒
写真を水彩絵の具で描いたように変えてしまうチュートリアルをご紹介します。 難しいテクニックやセンスは不要。初心者でも簡単に加工することができます。調整するのは各フィルターの数値部分だけ。誰でも簡単にできるので、興味のある方はぜひ試してみてください。 続きを読む 続きを読む⇒
一定の型にはまりがちなWebデザインの中で、深い印象を与えることができるのが、手作りの感触がただようイラスト。あたたかい雰囲気を醸し出し、親近感や信頼感が増します。 今回は、メニューや背景など、メインとなるパーツに"Webらしくない”イラストを利用した印象的なサイトをご紹介します。 続きを読む 続きを読む⇒
HTML5と言えばリッチなアニメーションが特徴ですが、これを自作するとなると、JavaScriptの知識が必要です。初心者さんやデザイナーさんには苦手な方もいるかもしれません。 そこで便利なのが、「HTML5 Maker」。プログラミングは一切不要、図を描くような感覚で簡単にアニメーションを作成し、HTML5とJavaScriptで書き出してくれるので、そのままサイトに使うことができます。 続きを読む 続きを読む⇒
フリック操作対応!ウォールやスライダーが無限スクロールする「eco-Scroll.js」 画像や動画、テキストを無限スクロールさせてくれるjQueryのプラグイン「eco Scroll」。フリック操作にも対応し、軽快な動きのウォールやカルーセル、スライダーを実現できます ... 続きを読む⇒
CSSだけで簡単実装!入力フォームのエフェクトをデザインする「Text Input Effect」に新バージョン追加 以前、「CSSだけで簡単実装!入力フォームの新しいエフェクト(149.docx)」で、入力フォームにフォーカスした時のCSSアニメーションを紹介しました ... 続きを読む⇒
レスポンシブWebデザインをラクにする「Bootstrap」のグリッドシステムを理解する 前回、CSSフレームワーク「Bootstrap」の導入メリットと導入方法についてご紹介しました。 今回は、画面幅が変わっても整ったレイアウトを保持し、モバイル向けのレスポンシブデザ ... 続きを読む⇒
どの企業もホームページを持つようになり、Web制作の需要が増える中、より短期間でローコストに開発を進めることが求められるようになっています。 そんな制作現場にとって非常に心強いのが、オープンソースの「Bootstrap」。 CSSフレームワークといわれるもので、ページにファイルを読み込むだけでレイアウトやボタン、ナビゲーションなどデザインされたスタイルを適用することができます。 今回は、Bootstrapの導入メリットと導入方法についてご紹介します。 続きを読む 続きを読む⇒
ECサイトで大切なのは、リピーターをつくること。そのためには、訪れた人を離さない魅力的なサイトづくりが求められます。 そこで、サイト全体をどう構築し、各ページにはどんな情報を掲載すればよいか、サイト制作や見直しのためのポイントをご紹介します。 続きを読む 続きを読む⇒
クリックした時やマウスをのせた時のアニメーションがかっこいいと、それだけでもサイトの印象がぐっと引き締まります。 今回は、秀逸なアイデアで気持ちの良い動きを実現するCSS3のエフェクトを集めました。 続きを読む 続きを読む⇒
ブラウザに合わせてレイアウトを変化させるレスポンシブウェブデザイン。 複数のデバイスでレイアウトを崩さず、ユーザビリティも高いページを作るのは手間がかかるもの。コーディング時には、レスポンシブWebデザインのならではの問題がたくさん出てきます。 そこで今回は、レスポンシブのコーディングでこれだけは外せない、4つの基本原則をご紹介します。 続きを読む 続きを読む⇒
リッチなアニメーションが楽しい!背景画像を画面いっぱいに表示するスクリプト「Vegas2」 画面いっぱいに画像や動画を表示させ、アニメーションで切り替えるスクリプト「Vegas2」をご紹介します。多数のオプションが用意されており、簡単に、リッチなエフェクトを実現すること ... 続きを読む⇒
>シンプルにデザインされたアイコンもいいですが、細部にまでこだわったデザイン性の高いアイコンも、アクセントにはピッタリ。
今回は、個性的なデザインで惹き付けられる無料のアイコンをご紹介します。 続きを読む 続きを読む⇒
Googleがウェブマスター向け公式ブログで、サイトがモバイルフレンドリー(スマホ対応している)かどうかをランキング要素の一つとして利用し始めることを発表しました。 これによって検索結果に大きな影響がもたらされることは確実です。今のうちに、自分が管理しているサイトをチェックしておく必要がありそうです。 Googleは、サイトがモバイルフレンドリーかどうかをチェックするツール「Mobile-Friendly Test」を公開しています。 簡単にチェックできるので、やっていないかたはぜひ今すぐ試してみましょう。 続きを読む⇒
メンテナンスをしたいとき、リニューアルをしたい時など、一時的にサイトを「メンテナンス中」にできるプラグイン「WP Maintenance Mode」をご紹介します。 公開までのカウントダウンや、メンテナンス終了のお知らせ通知なども設定することができます 続きを読む 続きを読む⇒
お問い合わせフォームなどをつくる時に気をつけたいのがスマートフォンでの入力。PCと同じフォームではユーザービリティが低く、せっかくフォームを表示させるところまで行っても、入力が面倒で離脱してしまうこともあります。 そこで今回は、フォームを作る時にやっておくべき、スマートフォン対策についてご紹介します。 続きを読む 続きを読む⇒
Photoshop効果を使ってマスキングテープを貼って作ったような文字の作り方をご紹介します。手でちぎった跡やテープの独特な質感などのリアルな表現が簡単に再現できます。 続きを読む 続きを読む⇒
フォームによくある、郵便番号を入力するだけで、住所が自動補完されるシステムをカンタンに実装できる国産のjQueryプラグイン「jQuery.jpostal.js」をご紹介します 続きを読む 続きを読む⇒
HTML5とCSS3を駆使して設計されたサイトが増えてきました。 ユーザーの端末に柔軟に対応し、素早いレスポンスと美しいデザインから、最高のユーザーエクスペリエンスを提供しています。 今回は2015年のWebトレンドを感じさせてくれるサイトをご紹介します。 続きを読む 続きを読む⇒
窓ガラスに付いた水滴で文字を書いたような効果を作るチュートリアルがPhotoshopRoadmapで紹介されていました。ビデオチュートリアルですが、とても分かりやすくておすすめです。 続きを読む 続きを読む⇒
CSS3のアニメーションを利用したホバー効果やツールチップ表示が増えてきていますが、今回はモーダルウィンドウをアニメーションで表示させるスクリプト「animatedModal.js」をご紹介します。 横からのスライド、バウンド、フェードと多彩なアニメーションの数は約80種。 続きを読む 続きを読む⇒