千葉県のホームページを作りたいあなたへ

ホームページっているの?

千葉県にお住まいでホームページを作ろうとしている方、こんにちは。今回は『ホームページっているの?』というところをお話しさせて頂きます。

ホームページって昔はそれが企業の顔のようになっていましたよね。その企業のこと、お店のことを調べるには検索してホームページを見るといった流れが主流でした。
ただ、今はTwitter・Instagram・FacebookなどのSNSが普及してその中で情報を調べる人がとても増えた感覚があります。Twitterのトレンドとかめちゃくちゃ速いですよ。ニュースで記事になるよりも速く出来事を知れちゃう。やはりそうなってくるとその中で十分だって思っちゃうわけです。Instagramなんかも同じでそこでお店のことが知れちゃうわけです。

ホームページはその後ですね。SNSで『ここなんか良いな』ってなった時にプロフィールを見に行く。そこでようやくURLが目に入るわけですが、それでもURLをタップする人はなかなかいません。そこには既にプロフィールがあるわけですから。わざわざURLをタップする必要性を感じないのでしょうね。もう知ったわけですから。 “千葉県のホームページを作りたいあなたへ” の続きを読む

Firefoxでbuttonがリンクできないことについて 千葉県の方へ

Firefoxでボタンのリンクが効かない

ホームページに追加作成したボタンの画像

今回ホームページデザインを変更し、上にあるボタンを追加作成したのですが、その際につまづいたところとして、Firefoxでボタンのリンクが効きませんでした。

<button><a  href=""></a></button>

↑HTML5だとこれは許可されていないようです。スタックオーバーフローに投稿がありました。MDNのサイトにも対話型コンテンツがあってはならないと書いてあります。

Firefoxだと効かないというよりは、他のブラウザがおおめに見てくれているようです。HTMLの記述が厳密にしっかりできているサイトは少ないらしく。そのためGoogleはHTMLに構文エラーがあっても検索順位のペナルティにはしていないようです。ただFirefoxはbuttonに関して他より厳密ということでしょう。

ホームページのデザイン更新 マテリアルデザインの要素を取り入れる 千葉県の方へ

ホームページにマテリアルデザインの影の要素

Webサイトのデザインについて、Googleが推奨するマテリアルデザインというものがあります。自分なりに要点を絞って考えると、ビビッドなカラーとグラデーションカラー、立体的でインタラクティブなサイトデザインなのかなと。前回グラデーションカラーについてやりました。今回は画像に影を取り入れてサイトを立体的にしてみました。

影を取り入れる前の画像

影を取り入れて立体的にみせた画像

このようになっております。

サイトの中のいくつかの画像に影を取り入れることでサイト全体が立体的に見えるようになりました。

CSSによる影づけ

“ホームページのデザイン更新 マテリアルデザインの要素を取り入れる 千葉県の方へ” の続きを読む

マテリアルデザインを参考にホームページをリニューアル 千葉県の方へ

マテリアルデザイン

Webデザインのトレンドともいえるマテリアルデザインを参考にPCREPAIRのホームページを新しくしてみました。マテリアルデザインって何?ってところから調べなおして取り入れられる要素としてグラデーションカラーとレイヤーを取り入れて、作ってみました。文字が浮き出ているというか、文字の後ろに画像があるように見えていたらうれしいです。画像だけでなくサイト全体が立体的に見えるように後述させて頂くフローティングアクションボタンの設置も検討したのですが、今のところはつけていません。

マテリアルデザインを参考にグラデーションカラーとレイヤーという要素を取り入れた画像1

マテリアルデザインを参考にグラデーションカラーとレイヤーという要素を取り入れた画像25

マテリアルデザインって何だろう?ということの前に、Webデザインの経緯から入ります。ひと昔前はFlashを使った動画がドーンとでてくるサイトが多かったですね。7年くらい前までですかね?5年くらい前にはほぼ見なくなっていたんですけど。デザインとしてはすごく綺麗でカッコよかったです。こういうサイト作りたいな。作れたらいいなと見ていました。ただ、その頃からスマートフォンがどんどん普及していました。Flashで動画がドーンとでてくるページは、容量が大きくてスマートフォンだと読み込むまでに時間がかかってしまうんですね。その頃まだ3Gのスマートフォンもたくさんありましたし(2012年から4Gが始まりました)、サイトを開くと下のテキストだけ先に読み込んで動画の部分だけクルクルしているというサイトを度々見た記憶があります。

そんなこともあり、セキュリティのこともあり、だんだんとFlashが使われなくなっていきました。

そうすると今度、画像のみのフラット(平面的)で動きのないサイトがたくさん増えました。それが今ですね。

そこにGoogleが推奨し始めたのがマテリアルデザインですね。マテリアルデザインは配色や影やアニメーションを組み合わせて、立体的に魅せインタラクティブな動き表現したデザインですね。インタラクティブというのは双方的ということで、一方的にアニメーションが動作するのではなく、見ている方の操作に合わせて動きが起きるというものです。例として、ボタンをタップしたら他のボタンがいくつも展開するというのがあります。

そんなことを考えながら、こういった要素を取り入れられるだけ取り入れてみました。
記事の初めに書かせて頂いたフローティングアクションボタンの設置も考えました。下の画像がフローティングアクションボタンです。

フローティングアクションボタンの画像

このフローティングアクションボタンを設置することにより、画像だけでなくサイト全体が立体的に見えるなと思い実装しようか考えたのですが、スマホで見た時に邪魔にならないかな・・・とか考えて今のところつけていません。アプリに求めているものとWebサイトに求めているものってまた違うだろうなとか、自分のサイトにフローティングアクションボタンはあった方がいいのかどうかなどを考えて、今のところはつけていません。今後また検討してみます。

⇓今回、マテリアルデザインの参考にしたサイトはこちらです

ユーザビリティに配慮したカラー設計のマテリアルデザインが最近のトレンド?

Microsoft edgeがPWA(ServiceWorker)に対応 千葉県の方へ

Microsoft edgeのPWA(ServiceWorker)対応

Webサイトとアプリを融合させるような技術のPWAが話題です。PWAというのはプログレッシブウェブアプリの略称で、大元にServiceWokerという技術が使われています。(ServiceWokerとPWAを分けて説明していきます。)
ServiceWokerはGoogleが先行していてChromeのみ対応しておりましたが、4月にありましたWindows10のApril Update 2018によりMicrosoft edgeもServiceWokerに対応しました。

“Microsoft edgeがPWA(ServiceWorker)に対応 千葉県の方へ” の続きを読む

Googleのアルゴリズム変更?検索順位が大幅に変動しています 千葉県の方へ

Google検索の順位が大幅に変動しています

Google Chromeの画像

現在Google検索の順位が大幅に変動し不安定な状態のようです。いつもお世話になっているナマズさん(namaz.jp)が大きく動いています。Googleは今後も段階的にモバイルフレンドリーを強化していくと公式ブログで発表しているのでそれが原因かもしれませんね。『段階的』ということなので検索順位が急激に変化するわけではないかもしれませんが。
私からお伝えしたいことはGoogle検索をした際にいつもと違うことに驚かないで頂けたらなと思いこの記事を書いています。今は検索することが習慣化されている方も多いでしょうし、ご自身で書かれたブログがいつものキーワードで出てこないなどの変化が起きるかもしれません。もちろん現在の変動幅が大きいだけであって、Googleの検索順位は常に変化しています。『あれ?あのサイトどこいったんだろう?』という場合は違うキーワードで試してみてください。

ホームページのアイコンを作成!タブにアイコンを表示させました!

ホームページのアイコンを作りました

今更ながら、自分のホームページにアイコンがないことに気が付きました。タブを表示しても白いアイコンが出てくる状態で大変申し訳ございませんでした。
ホームページのアイコンは色々なところで出てきます。代表的なところとしては下の画像のようにサイトを開いたときにタブに表示されます。

アイコンの説明画像

 

サイトへのショートカットをデスクトップに作成した際にもアイコンが表示されます。

アイコンの説明画像

 

ブックマークをした時も一覧の中でこのアイコンが表示されます。さらにタスクバーにピン留めした時もこのアイコンが表示されます。

アイコンの説明画像

今まで気づかずに大変申し訳ございませんでした。このアイコン画像は今のところこのブログと同じにしてあります。タイトルで違いがわかるので運営元は同じという意味を込めて同じ画像を使っています。

サイトのアイコンの作り方

サイトのアイコンの作成の方法は2つあるようです。
・サーバーを利用していてサーバーをいじれるのであれば、サーバーのルートドメインの後ろ、つまりサーバーの最上階に.icoファイルを設置する
・サイトのHTMLと同じディレクトリの中に.icoファイルを設置して、サイトのhead部分に<link rel=”shortcut icon” href=”×××.ico”>と記述する。
icoファイルの作成方法はここでは記述しませんが、32×32、24×24、16×16と3つのサイズのファイルを作りました。同じように見えるアイコンですが、ブラウザのタブに表示されるアイコンとショートカットを作成した時に表示されるアイコンのように、使用される場所によりサイズに違いがあります。そのためいくつかのサイズの.icoファイルを用意した方が良いです。
今まで気づかずに大変申し訳ございませんでした。今後はきっちり管理します。

Internet Explorerの解像度を1980×1080に変える 千葉県の方へ

Internet Explorerの解像度を変える

ホームページを制作していると、自分の使用しているパソコンでは綺麗に見えても他のパソコンで見てみるとレイアウトがずれているなんてことがあります。これはホームページ作成ソフトを使わずに自身でHTMLのコードを入力する方に多いのではないでしょうか。
ディスプレイは様々な解像度があり、すべての解像度でホームページが見れるようにすることが大切です。

解像度の種類

320×480
480×800
640×960
768×1280
1024×768
1366×768
1280×800
1280×1024
1920×1080
2560×1440

今まで主要な解像度は1366×768が多かったのですが、最近は1920×1080の解像度で販売されているパソコンが多いです。13.3インチのノートPCなどです。どんどんワイドになっっている傾向があります。

Internet Explorerを1920×1080に合わせる

私の使用しているディスプレイは1366×768です。それより画面が大きい1920×1080でホームページを確認するためにはどうしたら良いか。新しいディスプレイが発売される度に、ディスプレイを購入していては支払いがどんどん重なります。その場合、Internet Explorerの解像度を変更する設定方法があります。

Internet Explorerを開いてツールからF12開発者ツールを選択します。

InternetExplorerの解像度変更の説明画像

 

F12開発者ツールを選択すると下に開発者ツールが開きます。その中のエミュレーションを選択すると解像度を選択できます。自分の使用しているディスプレイサイズより大きい解像度に設定することもできます。

InternetExplorerの解像度変更の説明画像

 

ホームページは管理が大切

ホームページを制作して感じているのは作ることより、その後に管理することの方が大切ということです。いくら綺麗なホームページを制作しても、見て頂きたい人に見て頂けないなら制作した意味がないでしょう。その為に検索したときに見て頂きたい人に見て頂けるようにSEO対策をしたり、現在の検索順位を確認したりします。そして変化していくホームページのトレンドや新しく販売される製品への対応、Googleなどの検索エンジンの検索アルゴリズムのアップデートへの対応など、ホームページを制作して終わりではなく、ホームページを制作した後の管理の方が大切だと感じています。

ホームページ作成ソフトに頼らない

多くの方がホームページを制作するときにホームページ作成ソフトを使用します。ですが、柔軟かつ迅速にホームページを更新したい場合はホームページ制作ソフトを使用しない方が速いです。見て頂きたい人に見て頂けるようにする為のSEO対策も柔軟にできます。つい最近Googleがモバイルフレンドリーなサイトかどうかをアルゴリズムの基準に取り入れました。このような変化にも迅速に対応できます。
HTMLを使用してゼロからコードをかいていくことで自然とHTMLやCSSが細かく理解できるようになり、ホームページ作成ソフトよりも柔軟で迅速な対応でできるようになります。
meta keywordとは何か。meta descriptionとは何か。TITLEとはどこに表示されるものか。などが自然と理解できるようになります。このような所がホームページ作成ソフトではなく自作でホームページを制作する良い所ですね。