前回は、マークアップを行うためのHTMLタグの一覧が記載されたページのご紹介と、デザインイメージの考え方などを記載いたしました。
そこでッ、今回はいよいよマークアップ！
と、行きたい所ですが、実はまだまだ準備がございます。
そこで簡単ではありますが、マークアップの道のりまでを記載します。
上記がおおよその、マークアップまでに道のりになります。
以前であれば、ワイヤーフレームはパソコン用だけでよかったのですが、スマ―フォン用のページレイアウトも考えますと、結構ハードな流れです。がしかし、SEOの事を考慮致しますと、コレをやらない手はございません。
ikesaiはウェブデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを集めたWebデザイナーのためのWEBデザインリンク集。日本語&日本人が制作しているWEBデザインサイトを対象としています。
時間があるときは、このサイトを私もよく見ております。
カテゴリー別や、配色別でカテゴリーがなされているので、大変見やすく参考になります。しかし、いきなりカッコイイサイトの真似をしようと思っても、ジャバスクリプトやCSS3などが、最近流行のページでは、多用されていますので、動的なプログラムが使用されていな部分を 真似することをおすすめします。
いきなりジャバスクリプトやCSS3を使用したページを真似しようとすると、ページの完成までたどり着けなくなってしまうかもです。
次にご紹介は
上記は共にスマートフォンサイトのデザインのサンプルですが、2019年、現在ではレスポンシブでページ作成を行うか、ワードプレスなどphpで、サーバー上でパソコンの画面とスマートフォンの画面の振り分けを行うかになっています。
3～4年前までは、ジャバスクリプトのユーザーエージェントというプログラムを使い、パソコン用のページと、スマホ用のページを別URLで振り分けを行っていました。
しかし、これではSEOの観点から、あまり好ましくはありません。
なので今回は、レスポンシブデザインでとも思いましたが、あえてパソコン用のページのみで進めていきたいと思います。
5年ほど前、初めてレスポンシブデザインにてページを作成した際、大変苦労した経験がございます。
パソコンはワイドモニターが支流...。しかし、スマホは縦長...、
画像はどうすりゃいいの？
なぁ～んて思いながら、無理でしょッコレ！
などとブツブツ言いながら、作成したのを覚えております。
しかしながら、今ではあまり悩むことなくレスポンシブデザインでページを作成するまでに至りました...。
何事も慣れもごでいますが、以前にも記載しましたが「急がば回れ！」です。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
