WEB制作、初心者お役立ちブログ

WEB制作、初心者(素人)が最短ルートで、それなりのWEBサイトをつくれるブログを目指しています。個人でホームページ制作をしたい方など、よろしければ私のブログを、ご覧ください。

意識低い系、漫画でデザインの勉強!?

今回の記事は、

WEBデザインについてではないのですが、

紙媒体のデザインについて

私なりに紹介したいと思います。

ポスター、チラシづくりなどは、

どういう仕事でも、日常生活でも必要な場面があると思います。

万が一、デザインを任されたとします。

それで、

いざ自己流でデザインしてみたものの、

デザインに関するノウハウがなくて、

困ったり、つくったものの、

なんかイマイチということはあると思います。

それで、デザインについて、いざ勉強してみようと思って

書店でデザイン関係の本を探したとします。

それで、おそらくプロのデザイナー向けの堅苦しい内容の本が多いのではないかと思います。

そういった本はデザイン初心者にはハードルが高いと感じると思います。

そこで、実用的なノンデザイナーのための、

意識低い系の漫画デザイン本を紹介したいと思います。

こちらの本です。

この本はストーリー形式の漫画で楽しく

デザインの基本について学ぶことができます。

ノンデザイナーがデザインを学ぶには十分な内容だと思います。

よろしければ、購入の、ご検討をしてみて下さい。

では!

ぶっちゃけたWEBデザインの学習時間

今回の記事では、

私が以下の本で学習した時間を、

ぶっちゃけたいと思います。

こちらの本を執筆された方は、

現役WEBデザイナーさんで、

書籍執筆しました!「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」 | Webクリエイターボックス

こちらのサイトで、執筆した本のことを紹介されています。

それで、本題ですが、

私が、この本の学習に要した時間ですが、

約3日間です。

まとまった休みの日に、一気に学習しました。

とりあえず本を読みながら、

本に書かれた通りに、学習をしながら、

パソコンでの作業をすすめました。

WEBデザイン初心者(素人)の学習には、

ちょうどいいボリュームだと感じました。

おそらく、忙しい方でも少しずつでも学習すれば、

1ヶ月もあれば十分だと思います。

自分でWEBサイト(ホームページ)制作してみたいと思われましたら、

本、1冊にかける時間は、そこまでかからないと思います。

なので、最初の一歩は気軽な気持ちでいいと思います。

この本1冊と私のブログを参考にしていただければ、

ある程度のWEBサイト(ホームページ)はつくれると思います。

それと個人で無料でWEBサイトの運営ができます。

前回の記事で、そのことを書きました。

趣味でつくったWEBサイト、実例 - WEB制作、初心者お役立ちブログ

こちらの記事です。

何か情報発信をしたいとか、宣伝活動をしたいとか、

WEBサイトをつくるのには目的があると思います。

そういう時にWEB制作の知識が少しでもあると役立つのではないかと思います。

では!

趣味でつくったWEBサイト、実例

最初の記事で、長年、通っている整体のwebサイトをつくったことを紹介しました。

整体ニシオさんのWEBサイト⬇

HP: 整体ニシオ

こちらのサイト以外でも私はWEBサイトをつくっています。

私は趣味でchocoZAPというジムに通っているのですが、

筋トレやダイエット、chocoZAP(ジム)に関することのWEBサイトをつくりました。

以下に、そのWEBサイトを載せます。

HP: お気軽、筋トレLIFE

こちらのWEBサイト制作ですが、

コードなどの技術的なことに関しては、

今までの記事で、ご紹介した方法で、ほとんどできていると思います。

WEBサイトをつくる技術があれば、

何か情報発信をしたい時に役立つと思います。

ちなみに無料のサーバーを使っているので、

ネット環境があるパソコンさえ所持していれば、無料でWEBサイトの運営ができます。

ただし、無料のサーバーなのでスマホでWEBサイトの閲覧をすると広告がつきます。

ちなみにサーバーにアップロードする方法はネットで調べて、できると思います。

ただローカル環境でつくったWEBサイトをサーバーにアップロードすることに不安がある方がいると思います。

そういう方のためにサーバーにアップロードする方法が書かれた本を紹介しておきます。

この本に無料のサーバーにアップロードする方法が書かれています。

何かWEBサイトをつくって情報発信してみたい方は、

気軽に私のブログを、のぞいてみて下さい。

できる限り有益な情報を載せていこうと思います。

では!

WEB制作コード、コピペ集まとめ

今までの記事で、ご紹介したWEB制作のコードのコピペ集まとめを載せます。

【html&cssの基礎】

ホームページマスター - HTMLタグ、CSSで無料でHP作成

【ほとんどがhtml&cssのコピペでパーツがつくれる】

copypet.jp|パーツで探す、web制作に使えるコピペサイト。 - CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ

【様々な装飾をするためのcss集】

コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)

CSS見出しデザイン参考100選!コピペ可!どこよりも詳しく解説! | JAJAAAN

CSS | 125naroom / デザインするところ(会社)です。

【簡単にwebサイトにプログラミング言語を導入できる】

動くWebデザインアイデア帳 | 動くWebデザインアイディア帳

※注意事項

【コード使用に関しての注意とお願い】 動くWebデザインアイデア帳のサイトの一般公開は、「2024年8月末まで」となります。 2024年9月からは書籍購入者限定で閲覧できる形に変更となります。(電子書籍含む)

という注意書きがあるため、2024年9月からもこのサイトを利用したい場合、以下の書籍を購入する必要がある。

全くWEBデザインの知識がないという方は以下の

『サルワカ』さんのwebサイトを、参考にしてみて下さい。

軽く流し見る、雰囲気を知る程度で結構だと思います。

HTML&CSS入門:イチからWebデザインを習得する講座

もし、webデザインに興味を持って少し勉強してみたいという方は、

よろしければ以下に載せる本で勉強してみて下さい。

オススメ書籍です。

以上、コードのコピペ集まとめでした。

では!

簡単にWEBサイトにプログラミング言語を導入する方法

今回、ご紹介する内容は、

簡単にwebサイトにプログラミング言語を導入して動きをつけたりする方法についてです。

今回の記事でもコード(html&css)の基礎知識がある方を前提条件としています。

もしコードの勉強をしたいという方は以下の本の購入の検討をしてみて下さい。

私はプログラミング言語JavaScriptなど)の知識は、ほとんどないのですが、

プログラミング言語をwebサイトに導入して、

少し、動きのあるサイトにしています。

なぜ、それができるのかですが、

webサイトにプログラミング言語を導入する方法について、

非常に良心的なwebサイトがあるからです。

そのwebサイトに書かれている手順通りにすれば、

簡単にプログラミング言語をwebサイトに導入することができます。

 『動くWebデザインアイデア帳』

というwebサイトです。

以下にリンクを載せます。

動くWebデザインアイデア帳 | 動くWebデザインアイディア帳

こちらのリンク先を1度、のぞいてみて下さい。

プログラミング言語の導入方法がわかりやすく載せられていると思います。

ほとんどコピペ(コピー&ペースト)で、

プログラミング言語の導入ができます。

ただし注意事項として、

【コード使用に関しての注意とお願い】 動くWebデザインアイデア帳のサイトの一般公開は、「2024年8月末まで」となります。 2024年9月からは書籍購入者限定で閲覧できる形に変更となります。(電子書籍含む)

という注意書きがあります。

なので、

2024年9月からも継続して、このサイトを利用したいという方は、書籍の購入をする必要があります。

私は非常に重宝しているサイトです。

以下に書籍を載せます。

よろしければ購入の検討をしてみて下さい。

このサイトを活用すれば、

コード(html&css)の基礎知識がある方でしたら、

おそらく、驚くほど簡単にプログラミング言語の導入ができると思います。

それで、プログラミング言語に興味を持ち、

もし、ちゃんとプログラミング言語JavaScript)の勉強がしたいと思われましたら、オススメの本があります。

webデザインに特化したプログラミング言語JavaScript)の本があります。

以下に載せます。

こちらの本で基本的なwebデザインに必要なプログラミング言語JavaScript)の勉強ができます。

こちらの本を書かれている方は現役webデザイナーさんです。

Webクリエイターボックス

このサイトの管理人をされています。

よろしければ購入の検討をしてみて下さい。

では!

WEB制作お役立ちサイト③(html&cssの学習をした方用)

今回は、

コードのコピペ(コピー&ペースト)で、

WEBサイトの様々なパーツをつくるのに便利なcss集を、ご紹介します。

ご紹介した本(以下、参照)で学習した方を対象にWEB制作お役立ちサイトを紹介します。

最初の記事で、ご紹介したサルワカさんのWEBサイトに載っているcss集を、ご紹介します。

以下にリンクを載せます。

コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)

こちらのcss集だけでも、ある程度、基本的なWEBサイトの装飾はできると思います。

リンク先を、のぞいていただければわかると思いますが、わかりやすく分類されていると思います。

ただググれば(Googleで検索する)、

他にも、まだまだ沢山、WEB制作に関する便利な情報は出てくると思います。

そういうググる作業を根気よくするという行為もWEB制作の上達に必要なことだと思います。

例えば、以下に載せるリンク先も、その1つです。

CSS見出しデザイン参考100選!コピペ可!どこよりも詳しく解説! | JAJAAAN

このリンク先はデザイン会社さんのものです。

それ以外だと、他のデザイン会社さんのブログも参考になります。

以下に、そのデザイン会社さんのcssに関するブログのリンクを載せます。

CSS | 125naroom / デザインするところ(会社)です。

こういう風にググると結構な情報が出てきます。

ググることで表現の幅が広がると思います。

解決したいことなどを検索してみて下さい。

ある程度のことは解決できると思いますよ。

わからないことがあれば、ググる

この習慣を身につけるように心がけてみて下さい。

何事も一筋縄にはいかないと思いますが、

習慣にすることが大切だと思います。

次回はプログラミング言語を使うのに便利なWEBサイトを、ご紹介したいと思います。

ちなみに私はプログラミング言語について全然、理解していませんが、プログラミング言語を使っています。

どういうこと?

と思われたと思います。

その辺の説明も次回の記事でしたいと思います。

では!

WEB制作お役立ちサイト②(html&cssの学習をした方用)

今回は、

コードのコピペ(コピー&ペースト)で、

WEBサイトの様々なパーツをつくるのに便利なサイトを、ご紹介します。

ご紹介した本(以下、参照)で学習した方を対象にWEB制作お役立ちサイトを紹介します。

『こぴぺっと』というWEBサイトが、コードのコピペ(コピー&ペースト)で役立つ便利なサイトとなります。

以下にリンクを載せます。

copypet.jp|パーツで探す、web制作に使えるコピペサイト。 - CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ

こちらのサイトの構成は非常にシンプルで見やすく、

どういう場面で、コピペするコードを使うのか、わかりやすく分類されていたり、

と、

私が非常に重宝しているサイトです。

このサイトの良いところはコードでも、

ほとんどがhtml&cssで記述されていて、

JavaScriptなどのプログラミング言語を、ほとんど使わなくて済むというところです。

JavaScriptというプログラミング言語の詳細はふせておきますが、

プログラミング言語を使う場合は手間が、かかります。

ですが、

このサイトではhtml&cssで記述されたコードをコピペしてWEBサイトのパーツとして使用することができて、 

時短で、それなりのWEBサイトをつくることができます。

なので、非常に便利です。

それと、ある程度、html&cssの知識がある方はコードの全てを理解していなくても、

『コードの、この部分をいじれば、こうなるだろう』

というような推測で、ある程度、アレンジしたりもできます。

なので、是非このサイトは利用してみて下さい。

WEB制作の表現の幅が大きく広がるはずです。

次回の記事では様々なパーツに使う便利なcss集を、ご紹介したいと思います。

では!