CodePen – webサービスのデザインを考えるときにおすすめの海外サイト

2018年1月30日

 

どうも@version1です。

私はwebサイトの
デザインとかレイアウトを
考えるときは、ググって「いいね!」って
思うのを探すことが多いんですが、

それをするのにおすすめのサイト
あったので紹介します。

 

 

それは、
CodePenというサイトで
ここには、数々の
イケてるデザインレイアウトやコンポーネントなどがアップされています。
https://codepen.io/

codepentop

 

 気に入ったデザインを探して参考にしてみる

 

例えばですが、
自分のサイトのログインフォームを
チャチャッと作りたいけど
なんか「良いレイアウトとか配色ないかなぁ」
と考えたら

サイトの右上の虫眼鏡の部分をクリックして
「Login」
とかで検索します。

https://codepen.io/search/pens?q=Login&limit=all&type=type-pens

そうすると
ズラってイケてるデザインが
出てきます。

searchinig result by login

 

 

そして、
きになるデザインがポチッと
クリックすれば
気になるデザインのhtml,css,javascriptの
コードが見れます。

 

codepen detail

 

コードを見たり、
どうやって書いているんだろうというのを
見てみたり、
(このスケスケどうやっているんだろうとか)
気入ったデザインにコメントしたり
使い方は自由です!

というか見てるだけでも割とワクワクして
見てられます!

 

自分でもアップロードしてみた

 

そもそも、
ログインフォームを
作るのに
どんな感じで作ろかなぁというので
このサイトに辿りついたので、
自分でも作成したものをアップロードしてみました。

 

 

・・・

他の人気デザインに比べれば
だいぶ見劣りしますが

 

まあまあとりあえずはこんなところで、
(Edit on CodePenというところを押すとサイトで見れます)
 
CodePenを使えば上のようにブログでのシェアも簡単なので
ぜひ使ってみると良いと思います!!

 

以上です!

 


webデザインの基本のちょっと上を学ぶなら
この本をオススメします。

css,htmlはわかっているけど
なんかデザインとかレイアウト
とかはいまいちという人はこの本にあるコードを
真似してみると良いと思います。

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)