またまたマークアップのその前に！その2

前回は、マークアップを行うためのHTMLタグの一覧が記載されたページのご紹介と、
デザインイメージの考え方などを記載いたしました。

 
そこでッ、今回はいよいよマークアップ！
と、行きたい所ですが、実はまだまだ準備がございます。
 

そこで簡単ではありますが、マークアップの道のりまでを記載します。
 

 
上記がおおよその、マークアップまでに道のりになります。
 

以前であれば、ワイヤーフレームはパソコン用だけでよかったのですが、
スマ―フォン用のページレイアウトも考えますと、結構ハードな流れです。

 
がしかし、SEOの事を考慮致しますと、コレをやらない手はございません。
 

時間があるときは、このサイトを私もよく見ております。
 
カテゴリー別や、配色別でカテゴリーがなされているので、
大変見やすく参考になります。
 
しかし、いきなりカッコイイサイトの真似をしようと思っても、
ジャバスクリプトやCSS3などが、最近流行のページでは、
多用されていますので、動的なプログラムが使用されていな部分を
真似することをおすすめします。
 
いきなりジャバスクリプトやCSS3を使用したページを
真似しようとすると、ページの完成までたどり着けなくなってしまうかもです。

 
次にご紹介は

上記は共にスマートフォンサイトのデザインのサンプルですが、
2019年、現在ではレスポンシブでページ作成を行うか、
ワードプレスなどphpで、サーバー上でパソコンの画面と
スマートフォンの画面の振り分けを行うかになっています。
 

3～4年前までは、
ジャバスクリプトのユーザーエージェントというプログラムを使い、
パソコン用のページと、スマホ用のページを別URLで振り分けを行っていました。
 

しかし、これではSEOの観点から、あまり好ましくはありません。
 

なので今回は、レスポンシブデザインでとも思いましたが、
あえてパソコン用のページのみで進めていきたいと思います。
 

5年ほど前、初めてレスポンシブデザインにてページを作成した際、
大変苦労した経験がございます。
 

パソコンはワイドモニターが支流…。
しかし、スマホは縦長…、
 
画像はどうすりゃいいの？
なぁ～んて思いながら、無理でしょッコレ！
 
などとブツブツ言いながら、作成したのを覚えております。
 
しかしながら、今ではあまり悩むことなく
レスポンシブデザインでページを作成するまでに至りました…。
 

何事も慣れもごでいますが、
以前にも記載しましたが「急がば回れ！」です。

それではまた続きは次回…。