ブログ・ネットショップのデザイン用語のググり方・コピペの基礎

今回はとても楽しいサイトデザイン入門編です。最後の方で注意書きもあるのでそちらも目を通して見てください。

 

ブログ・ネットショップのデザイン用語のググり方

ブログサイトやネットショップを自由度の高い有料版で始めたのに「カッコよくしたいけどわからない」という方が多いようです。

たぶん始める前に、【無料版よりも有料版の方が自分らしくできる！】などで始めてしまったんでしょう。

HTMLやCSSが書ける方には自由度が高く、オリジナリティ溢れるサイト作りができるのは確か。

けれどブログなら”記事を書く事”。ネットショップなら”モノを宣伝・販売する事”が1番の目的な筈なのに、いつしかサイトデザインにばかり時間を取られ、本質を見失う方が殆どです。

そんな今回はHTMLやCSS、他にもサイトデザインの素早く終わらせる為の【ググり方】についてまとめていきます！

何でも情報として発信してくれている世の中ですから、ググり方(用語)さえわかっていれば【コピペOK】と解説してくれている記事に素早く辿り着ける筈です。

ではいきましょう！

 

【デザイン用語】コピペする為の準備

まずコピペとはコピー＆ペーストです。そしてコピペする為には

などわかっておく必要があります。例えばサイトの文字を少し大きくしたいなら、”ブログ,文字を大きく,コピペ”などでも参考の記事に辿り着けそうです！

因みに文字を大きくする為にこんな文字列を使って、デザインしていきます。

 

 

 

この画像は今見てもらっているブログサイトのトップページですが、「ここの部分のこんな感じのを自分も使いたい！」と思った時にどんなググり方をしましょうか？

筆者自身もHTMLやCSSが書ける訳ではありません。けれど少しずつですが何を指示する為のHTMLなのか？や、自分自身の「ココをこうしたい！」に対してどう検索するべきかがわかるようになってきています。

初心者には”ググってコピペ”が1番確実で早いので、コピペする為の基礎だけは知っておきましょう。

 

よく出てくるHTMLやCSSとは？

 

ブログサイトやネットショップの運営を始めるとよく出てくる言葉、それがHTMLやCSSです。何のこっちゃですよね笑。

HTMLとは？と検索すると、説明部分だけでも「難しくてよくわからない」「読む気が失せた」なんて方もいるかと思います笑。

 

HTML

筆者自身の見解で簡単に言うと、『どうしたいか？』という事をコンピューターにわかる言語で伝えるのがHTMLだと思ってください。

先程の”文字を大きくする為の文字列”のように「どうしたいか？」がわかれば、それをググってコピペすればある程度の事は出来てしまいます！

CSS

次にCSSですがコチラの方がデザインに近い使い方をします。デザインCSSと言ったりもします。

HTMLが「どうしたいか？」だったのに対して、CSSでは「どんな風に見せたいか？」をコンピューターへ指示していきます。

これは過去使っていたCSSの1部ですが、何となくわかる部分もあるかと思います。h2とは大きな見出しの事で、カラーなどのワードも見て取れますね！

シャープの後に続く数字6桁はコンピューターに色を伝えています。

こんな風に「どう見せたいか？」をCSSでコンピューターへ伝えていきます。

 

ググる為に必要な用語

それではググっていく為に必要な用語を解説していきたいと思います。全てを網羅する事は難しいでしょうが、必要最低限は伝わるように頑張ります！

因みに今は、基本的に全てのサイトページをスマホで見る方が多いので、画像はスマホからみた画面にしています。

 

ヘッダー

 

まずサイトページの上部、基本的にはブログサイトやネットショップの名前が入る場所です。

ヘッダー部分はトップページから飛んだ先にある、記事ページや商品ページでも表示されるので、気を抜くと全てのページの顔を壊すことになってしまいます。

この辺のデザインを変更したい場合、ヘッダー,カスタマイズ,コピペなどで検索するのがベターです。

また使っているサービスがあれば

などと、なるべく具体的に検索ワードを設定します。

 

トップページ

 

トップページはサイトに飛んだ時に表示されるヘッダーの下の部分一帯を指します。皆さんが最初に弄る部分でしょう。

ブログサイトでは記事ページがどれだけ優れているかが勝負ですが、ネットショップではトップページが鍵を握ります。

例えばこのSYUMI LABOではスマホ表示は1列に記事が並ぶようにデザインされていますが、パソコンからの表示は記事が2列に並びます。

このようにコンテンツの並びは1カラム、2カラムと列をデザインするのですが、トップページ部分を弄りたい時には検索方法の参考にして下さい。

 

サイドバー

 

続いてサイドバーの説明です。

スマホ表示ではトップページに並ぶ記事や商品の下に表示され、パソコン画面では基本的には右側。カラム数によっては下部に表示されます。

このサイドバー部分では読んでいる記事、見ている商品に対して関連の記事や商品をオススメ表示する事が出来ます。

サイトに訪れた人が他にも気になるモノを見つけやすくする効果があり、離脱率を下げるように工夫をします。

 

フッター

 

次にフッターはページ下部に表示される部分です。よく設定されているのはサイト名や”上まで戻るボタン”、お問合せ先などを設定します。

個人的なサイトでも企業に負けないくらい細部までこだわりましょう。

 

記事(商品)ページ

 

これはSYUMI LABOで掲載している記事の画像ですが、記事ページでは細かいカスタマイズを行う必要があります。

文字サイズやフォントの種類、見出しやリスト、行間などやろうと思えば沢山のカスタマイズを行うことができます。

 

独自ドメイン

独自ドメインとはサイトで言えば住所の様なモノ。アマゾンのamazon.comなどは有名ですよね。独自ドメインの設定ができるのか？は利用しているサービスによりますが、【はてな】独自ドメインの取得・設定・設置。転送サービスの解約方法にまとめているので、気になる方はこちらをどうぞ。

 

テンプレートとカスタマイズ

 

ここまでのデザインのカスタマイズができる範囲を見て、全てを弄るのは大変に感じますよね。

しかし通常はブログサービスやネットショップの運営が用意してくれているテンプレートを使うことがほとんどです。

自分自身が理想とするサイトデザインに近い形のテンプレートに、少しカスタマイズを付け加える事になります。

ここで注意が必要なのは、カスタマイズのし過ぎはサイトの表示スピードを遅くしてしまいます。

元々のテンプレートは既にHTMLやCSSでデザインされています。そこへカスタマイズを加えるのは、既にあるデザインに上書きをするという行為である事は理解しておかなければいけません。

時にコピペを追加してもデザインが反映されず元々のデザインのまま、なんて事もあります。その場合は既にあるデザインを打ち消すコードを挿入し、その後にデザインを足すなど。

コードの増え過ぎはページの表示速度を下げ、せっかくたどり着いてくれた読者にとっては”居心地の悪さ”に繋がってしまいます。くれぐれもカスタマイズのし過ぎには注意しましょう。

 

まとめ

今回はサイト運営を始めた時に、おそらくとても楽しいデザインカスタマイズの基礎についてのまとめでした。

サイトデザインは楽しいですが、やり過ぎには注意しましょう。