-
Notifications
You must be signed in to change notification settings - Fork 0
/
index4.html
174 lines (164 loc) · 18.3 KB
/
index4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ホームページの制作やリニューアル、WordPress、Webサービスの追加、スマートフォン対応|kato.kaisya</title>
<meta name="description" content="コーダー・フロントエンドプログラマー。ホームページの制作やリニューアル、WordPress、Webサービスの追加、スマートフォン対応ならお任せください。
専門的なSEO対策がなくても大丈夫なホームページにいたします。">
<link rel="stylesheet" type="text/css" href="css/my.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="wrap">
<!-- ========================= ヘッダーここから========================= -->
<header id="top">
<h1>kato.kaisya</h1>
<p>ホームページの制作やリニューアル、WordPress、Webサービスの追加、スマートフォン対応ならお任せください。<br>
専門的なSEO対策がなくても大丈夫なホームページにいたします。</p>
</header>
<!-- ========================= ヘッダーここまで========================= -->
<div class="conte">
<article>
<div class="menubtn">テストサイト集 ▼</div>
<nav id="menu" class="rei">
<ul class="left jun">
<a href="hotel"><li><img src="img/hotel_s.png" alt="hohel">ホテル<span>練習用サイト</span></li></a>
<a href="icedream"><li><img src="img/icedream_s.png" alt="icedream">icedream<span>jsを全く使わないサイトデザイン</span></li></a>
<a href="aoki"><li>AOKI<img src="img/aoki_s.png" alt="icedream"><span>ｊQueryを使わない生のjsとcssのみのサイト</span></li></a>
<a href="index2.html"><li>APIテスト<img src="img/app_s.png" alt="icedream"><span>RailsでAPIを作成しHTMLで受け取る</span></li></a>
</ul>
<p class="ryumin">埋め込みフォントのテスト 「リュウミン」</p>
<p class="midashi-mi">埋め込みフォントのテスト 「見出し明朝」</p>
<br>
</nav><!--=========rei=========-->
<!--=========ホームページのお悩みを解決します！開始=========-->
<section>
<h2>ホームページのお悩みを解決します！</h2>
<ul>
<li>「ホームページを作ったけれど、ほったらかしにしてしまっていて…」</li>
<li>「うちもホームページを作ったけれど、誰も見てくれていないような…」</li>
<li>「SEO対策すれば効果が上がるっていう話を聞いたんですが…」</li>
<li>「ホームページにブログをつけたい」</li>
<li>「スマートフォンだと小さくて見づらいけれど、どうしたら良いの？」</li>
<li>「アニメーションとかFlashとか動くものをつけたいけど、難しいプログラムが必要なの？」</li>
</ul>
<p>こういった疑問、お悩みに的確なアドバイスをさせていただき、適正な方法をご提案させていただきます。<br>
kato.kaisyaはHTMLのプロフェッショナルです。</p>
<h4>ホームページは生き物です!! 放置すれば、老化します。</h4>
<p>と言うのは、大げさですが、インターネットのルールは日々進化しており、ほんの２～３年前の最新技術は、もはや過去のもです。<br>
また、技術だけでなく、長い間更新されないホームページは検索順位がどんどん下がっていくため、気がついたら「誰にも見られない」といった事態になりかねません。<br>
誰にも見られないホームページは死んでいるのも同然です。<br>
せめて、全体の訪問件数の増減などをみて、細かい部分に手を入れたりして見ましょう。</p>
<h4>ホームページを作っても、何もしなければ誰にも見られません。
まず、自分のホームページを見るためにどうすればよいか調べてみましょう。</h4>
</section>
<!--=========ホームページのお悩みを解決します！ここまで=========-->
<!--=========アコーディオン解説ここから=========-->
<div class="accordion">
<h3><label id="acco1" for="adBtn1-1"><img src="img/hanabi.png" alt="">１ 直接URLを打ち込んでみる。</label></h3>
<input type="checkbox" id="adBtn1-1">
<div class="accordionIn in1">
<p>本来であれば、これで見れないはずがないのですが、ドメインの失効や、サーバーのトラブルなどが原因でごくまれに見れないことがあるので、まずはそれを確認してみましょう。</p>
<!-- /.accordionIn --></div>
<h3><label id="acco2" for="adBtn1-2"><img src="img/hanabi.png" alt="">2 Googleで検索してみる</label></h3>
<input type="checkbox" id="adBtn1-2">
<div class="accordionIn in2">
<p>1の直接URLをたたく方法は、他の人がホームページを見るときにはあまり行われません。新しい客がこの方法で見ることなどほぼ無いと言っても過言ではないでしょう。<br>
実際には、新規の方はGoogle等の検索を使ってあなたのホームページに来る方が殆どです。（どこか他のサイトにリンクを張ってあれば話は別ですが…）<br>
新規の訪問者がどんな検索キーワードで訪問するのか、あなたは知っていますか？<br>
Googleアナリティクスなどのツールを使えば簡単に、訪問数や訪問者の傾向などを調べることができるようになります。<br>
ただ、ホームページを作るための言語HTMLを知らないと、その導入は難しいです。<br>
そういった方はお気軽にご相談ください。</p>
<!-- /.accordionIn --></div>
<h3><label id="acco3" for="adBtn1-3"><img src="img/hanabi.png" alt="">3 SEO対策</label></h3>
<input type="checkbox" id="adBtn1-3">
<div class="accordionIn in3">
<p>SEOとは、「Search Engine Optimization」の略で検索エンジン最適化のことをさします。<br>
読んで字の通り、検索エンジンを最適な状態にするための対策であり、検索順位を上位に上げるためのものではありません。<br>
しかし、検索順位が上位になれば、訪問数も増えやすくなるなるため、それを売りにした業者も多数存在します。<br>
それらの業者の中で、もっとも単純な方法として、専用のプログラムを使って、自分のサイトに一日に何回も訪問してアクセス数を増やして、あたかも訪問数の多いサイトのように見せかけて検索エンジンを誤解させる方法があります。<br>
しかし、この方法はスパム行為とみなされ、検索エンジンを運営する会社に見つかって、検索順位を落とされたり、検索エンジンに載らなくなったりするペナルティを受ける危険性が極めて高いです。<br>
また、ホームページのデータを置いておくためのサーバーにも、そういった行為でサーバーに負担がかかることを嫌って、同一の箇所から大量の訪問があった場合、そのアクセスを遮断する機能がついているものが多いです。<br>
（ただし、サーバーの運用とSEOの両方を売りにする会社の中には未だにこの方法を使っている業者も存在します）<br>
こういった方法は、検索エンジン最適化するのではなく、最適な状態から意図的に捻じ曲げる方法です。<br>
インターネットは世界中の人たちが日々使っている大事な道具です。<br>
このような間違った方法で「欲しくもない情報」を押し付けられる人のことを考えて、正しい方法で検索順位を上げることを考えましょう。<br>
正しい知識と方法で検索順位を上げようとお考えの方は、お気軽にご相談ください。</p>
<!-- /.accordionIn --></div>
<h3><label id="acco4" for="adBtn1-4"><img src="img/hanabi.png" alt="">4 ホームページにブログをつける</label></h3>
<input type="checkbox" id="adBtn1-4">
<div class="accordionIn in4">
<p>先ほども述べたとおり、ホームページは更新されなければ、検索順位が下がっていく傾向にあります。<br>
それを避けるためにプログラムを組んで機械的に更新したように見せかける業者も居ますが、実際に更新されたのかと思ってみてみたら、何年も前の記事しか乗って居ないホームページだったとしたら、
あなたはそのホームページをまた見たいと思うでしょうか？<br>
どんな小さなことでもかまわないので、ホームページをこまめに行使し、常に新しい情報を発信し続けることが、より多くの人に見てもらうための早道です。<br>
でも、「そんなにしょっちゅうホームページを書き換えていたら大変だし、いちいち専門家に頼むのも申し訳ない…」という方でも感単にホームページの情報を更新できるようにしたものがCMS（コンテンツマネージメントシステム）です。<br>
ホームページの全体はそのままで、更新情報の部分だけにどんどん新しい情報を追加していけます。<br>
感単にいえば ホームページ ＋ ブログ といった図式となります。<br>
これを使えば、専門的な知識がなくてもホームページの中身の情報を常に最新の情報に保つことができます。<br>
※ブログの更新をした事がない人でも、Facebookをした事があれば、更新作業の感覚はそれに近いものがあります。どちらもした事がない人は、お気軽にご相談ください。簡単に更新できる方法をご説明します。<br>
昔は有料サービスのCMSも多かったのですが、現在はWordPressというオープンソースの無料で使うことができるCMSを使うところが殆どです。（2015年現在で世界中で65％のシェアを誇ります。）<br>
このWordPressにはじめから入っているテンプレートを使えば、「ちょっとウェブをかじったことがある」程度の知識でも簡単に、ブログつきのサイトが作れてしまいます。<br>
ただし、テンプレートなので、必ずしも自分の作りたいサイトが作れるかどうか…<br>
また、今までのホームページがあるから、それを無駄にしたくないと考えている方もいらっしゃるでしょう。<br>
そういった方はお気軽にご相談ください。</p>
<!-- /.accordionIn --></div>
<h3><label id="acco5" for="adBtn1-5"><img src="img/hanabi.png" alt="">5 スマートフォンだと見難い</label></h3>
<input type="checkbox" id="adBtn1-5">
<div class="accordionIn in5">
<p>最近はホームページもパソコンで見る人は減り、スマートフォンやタブレットで見る人が増えています。<br>
しかし、パソコンの大きなモニターと違って、スマートフォンの画面は小さいため、パソコンと同じ表示だといちいち拡大しないと文字などが小さくて見ることが困難です。<br>
スマートフォンを見るとき、たいていの人は片手で持つ人が殆どだと思いますが、表示を拡大縮小するためには必然的にもう片方の手が必要になります。<br>
外出先などで荷物片手にお店の情報などを調べようとしたときに、画面を拡大縮小するのはかなり面倒なので、拡大縮小が必要なページは見たくなくなってしまいます。<br>
※Googleでは、「スマートフォン対応していないサイトは検索順位を下げる」と公式発表しています。<br>
これらを解決するために、スマートフォン用のページを作るというのが理想です。<br>
ただし、スマートフォンとひとことで言っても様々な種類があり、画面の大きさもまちまちです。また、タブレットなどのようにスマートフォンとパソコンの中間の大きさのモニターを持つものも存在します。<br>
それら一つ一つにあわせて専用ページを作っていたら、お金と時間がいくらあっても足りなくなるでしょう。<br>
そんな問題を解決するのが、レスポンシブルウェブデザインです。<br>
これは、モニターの画面の横幅にあわせて最適なレイアウトに切り替えて、文字や画像などのコンテンツを常に見やすい状態にして表示する技術です。<br>
最近では、Bootstrapというレスポンシブルデザイン専用のフレームワークが登場し、多くのWebデザイナーがこれを利用してレスポンシブルウェブデザインを導入するようになりました。<br>
ですから、現在ご依頼のウェブデザイナーの方にまず、ご相談してみてください。<br>
Bootstrapを使うことで簡単にレスポンシブルデザインを実装することが可能です。<br>
ただし、このBootstrapはフレームワークであり、いわばテンプレート集のようなものなので、独自のルールがあります。<br>
必ずしも希望通りのものが出来上がるかどうか保証の限りではありません。<br>
そんなときでも、Webデザイナーの方が正しいCSSの知識を持っていれば、Bootstrapに頼らないでご希望あったスマートフォン対応が可能です。<br>
kato.kaisyaはBootstrapの普及以前からレスポンシブルウェブデザインを使用しており、必要最小限の改造だけでスマートフォン、タブレット向けの表示を可能にします。</p>
<!-- /.accordionIn --></div>
<h3><label id="acco6" for="adBtn1-6"><img src="img/hanabi.png" alt="">6 アニメーション</label></h3>
<input type="checkbox" id="adBtn1-6">
<div class="accordionIn in6">
<p>実はアニメーションはあってもなくてもホームページの訪問数に大きな差は出ないというのが現実です。<br>
特に、ホームページを開いた瞬間に全画面がアニメーションで終わるまで何もできないといった演出は、少しでも早く情報を得たい人にとっては不快以外の何もでもありません。<br>
しかし、ちょっとした演出効果や興味付けのために、少しでもアニメーションなどを追加したいという方も多いです。<br>
また、興味付けや、操作して楽しいと思わせるためのアニメーションには一定の効果が期待できます。<br>
以前はFlash＋アクションスクリプトという技術でそれらの効果を足して居ましたが、現在はiPhoneやiPadがFlashに対応しておらず見ることができません。<br>
また、FlashPlayerがウィルスに狙われやすいことなども手伝って、Flashを埋め込むサイト作りは過去のものとなりつつあります。<br>
では、どうやってアニメーションを表現したらよいのでしょうか？<br>
一番手っ取り早い方法は、YouTubeに動画をアップし、それをホームページに埋め込むことです。<br>
SEO的に見てもこれが一番手っ取り早い方法です。<br>
しかし、動画などを表示するだけなら、これで十分ですが、何枚かの写真をスライドさせて状況をイメージさせたり、ボタンにアニメーションをつけて思わず押したくなったりするようにするためには、この方法は有効ではありません。<br>
また、動画だといきなり音声が出てしまったりして、外でスマートフォンでホームページを見ていて、周りの人からいやな顔をされた人も多いのでは？<br>
突っ込んだ説明やプロモーションなどは、YouTubeなどの動画（自動再生などはさせず、見る人が再生できるかどうか判断できるようにする必要があります）に任せ、簡単なアニメーションは別の方法で実装しましょう。<br>
実は、最新のHTMLとCSSにはアニメーションを行うための技術も含まれています。<br>
この機能を使うことで、簡単且つ軽量なアニメーション効果を作り出すことが可能です。<br>
更に、Javascriptというスクリプト言語でHTMLとCSSの表示を操作することで、ボタンアクションなども自由に追加できます。<br>
全体のバランスを考えて、極力無駄なプログラムを減らし、最適な方法でアニメーション効果を追加することが肝心です。</p>
<!-- /.accordionIn --></div>
</div><!-- /.accordion -->
<!--=========アコーディオン解説ここまで=========-->
</article>
</div><!--=========conte=========-->
<!-- ========================= フッターここから========================= -->
<footer>
<address>© kato.kaisya</address>
<p id="pagetop" class="btn01 cleafix"><a href="#top">∧ページの先頭へ∧</a></p>
<p id="pageback" class="btn01 cleafix"><a href="javascript:history.go(-1)"><<前ページに戻る</a></p>
</footer>
</div><!--===========wrap===========-->
<!-- ========================= フッターここまで========================= -->
<script src="js/my.js"></script>
<script src="https://use.typekit.net/nei6ruw.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</body>
</html>