初心者が一人でwebデザインを行うときに参考にしたいサイト７つ。

僕は最初、HTMLやCSSさえ覚えれば、webデザインができるようになると勝手に思っていた。

実際に自分で作り始めて気づいたのは、Webデザインを行うにはいくつかの過程があるということである。

いきなり、テキストエディターで作り始めるわけではない。

サイトのテーマやコンテンツ、雰囲気から色のイメージを固めたり、レイアウトデザインをまとめてから作り始める。

今から紹介するのは、初心者がwebデザインをするときにこの辺のサイトまたはwebサービスを使えばいんじゃね？と思うサイトである。

＊なお、僕は最初から最後まで独学なので本職の人が見たら失笑されるかもしれないので本当に初心者の人向けです。

それでは。

Ⅰ.webデザインの見本帳

f:id:my-load:20180809200953j:plain — http://www.web-mihon.com/category/impression/03/

様々なwebデザインの美しいサイトがまとめられている。
デザインが自分で思い浮かばないならば、美しいサイトをパクッて作ってみればいい。
自分で作ってみることでコードを書く技術が洗練されるし、美しいサイトのレイアウトや色遣いなどを自分の感覚で覚えることができる。

このサイトでは印象、色、ジャンルの３つからサイトを探せるので、自分が今から作ろうとするサイトはどのようなサイトなのかがわかれば、類似する美しいサイトを真似することができる。

初めのうちは0からデザインするというのはものすごく難しいからそれを薦める。

Ⅱ.colorcode

f:id:my-load:20180809200930j:plain — https://colourco.de/

サイトの配色の際に利用できるサイト。
マウスを滑らすだけで、色が変わり、CSSが表示されるので配色を行うときに重宝する。同じトーンの色で組み合わせるときなども色を探しやすいし、僕のようなど素人は色のcssなどいちいち覚えていない。

このシンプルな使い心地が最高である。

Ⅲ. Cacoo

f:id:my-load:20180809200933j:plain — https://cacoo.com/ja/

レイアウトデザインをするときに僕はCacooを使っている。
有料版もあるが、無料版でも６シートまでなら普通に使えるし、使い終わったシートは削除できるので、初心者であれば何の問題もないと思う。

webサービスであることがとても素晴らしい。
パソコンにインストールしなくても割と自由自在にデザインできるツールがあるのはありがたいし、使い方も自然と覚えられるくらいシンプルで使いやすい。

別にwebデザインだけでなく、ワイヤーフレームやデータベースの設計のテンプレートもあるし、フローチャートやガントチャートなど仕事で応用できそうなテンプレートも豊富なので、僕ももっと使いこなせるようになりたいと思っている。

まずは自分が作りたいサイトのページをcacooで描いてみよう。ボックスのレイアウトや配色を修正しながら。

満足がいくものが作れたら、実際に作り始めればいい。

Ⅳ. Pixaboy

f:id:my-load:20180809200956j:plain — https://pixabay.com/ja/

写真投稿サイト。
面白くて美しい写真が大量にある。
サイトのトップページに写真を配置することはよくあるし、ふさわしい写真を持っていればいいけれど、ぼくは写真家ではなので、大体pixaboyで写真を探しダウンロードする。

無料会員登録すれば、写真をダウンロードするときに一々確認の画面も出てこないのでサクッとしておこう。

ダウンロードする画面の右に、商用利用可、帰属表示不要と書いてあるのが何よりうれしい。

良い写真があったらダウンロードしておこう。

Ⅴ. fotor

f:id:my-load:20180809200920j:plain — https://www.fotor.com/jp/

写真加工webサービス

webサービスであるというところがポイントである。
フリーソフトであっても僕はあまりパソコンにインストールしたくない。
pixaboyでダウンロードした写真をサイトに合わせるときはfotorを使用して写真を加工する。別にデフォルトのアプリを使ってもいいけどfotorは非常にオシャレな感じがするからである。

Ⅵ.フォントフリー

f:id:my-load:20180809200923j:plain — http://fontfree.me/

フリーフォント投稿サイト。
簡単にフリーフォントが探せる。
最初から入っているフォントははっきり言って貧弱すぎるので、良さそうなフォントは一通りダウンロードしておこう。
googleフォントを使用してもいいが、重くなるかもしれない。
どちらを使用するかは自身の判断で。サイトでフリーフォントをダウンロードしても商用利用できないものも勿論あるし、表示先のパソコンに入っていなければ、別のフォントになるということは知っておこう。
よく名前を聞くメジャーなフリーフォントは一通り入れておいたらいいと思う。