ニャーニャニャニャニャーニャオー。

ワン! ワンワンワン! ワワワンワン!

ガーガー、ガガガーガーガー。

ワォーン、クゥー。

ニャーニャニャニャーニャーニャー。

ワンワンワン! ワンワン!

最近スマートフォンサイトの案件が増えてきました。
そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、
まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。

すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください）

download

ヘッダーの右にメニュー

<h3>ヘッダーの右にメニュー</h3>
<!--ヘッダーの右にメニュー-->
 <header>
 <h1><a href="#"><img src="title.png" alt="SITE TITLE"></a></h1>
 <nav>
 <ul>
 <li><a href="#">PC</a></li>
 <li><a href="#">ログイン</a></li>
 </ul>
 </nav>
 </header>
<!--/ヘッダーの右にメニュー-->

/* ヘッダーの右にメニュー */
.header1{
 background: -webkit-gradient(linear, left top, left bottom, from(#ececec),to(#fff));　
 background: linear-gradient(#ececec, #fff);
 background-size: 100% 100%;
 height: 50px;
 border-bottom: 1px solid #dadada;
}
 .header1 h1{
 display: block;
 height: 50px;
 width: 135px;
 line-height: 50px;
 font-weight: bold;
 margin-left: 5px;
 float: left;
 }
 .header1 nav{
 float: right;
 }
 .header1 nav li{
 float: left;
 }
 .header1 nav li>a{
 display: block;
 height: 33px;
 width: 70px;
 color: #fff;
 line-height: 30px;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff),to(#ececec));
 background: linear-gradient(#fff #ececec);
 text-align: center;
 text-decoration: none;
 border: 1px solid #dadada;
 margin-top: 7px;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6),-1px -1px 1px rgba(255, 255, 255, 0.5);
 font-weight:bold;
 }
 .header1 nav li:first-child>a{
 border-radius: 4px 0 0 4px;
 }
 .header1 nav li:last-child>a{
 border-radius: 0 4px 4px 0;
 border-left: none;
 margin-right: 5px;
 }

ヘッダーの右にメニュー２

<h3>ヘッダーの右にメニュー２</h3>
<!--ヘッダーの右にメニュー２-->
 <header>
 <h1><a href="#"><img src="title.png" alt="SITE TITLE"></a></h1>
 <nav>
 <ul>
 <li><a href="#"><img src="icon1.png" alt="カートを見る"></a></li>
 <li><a href="#"><img src="icon2.png" alt="検索"></a></li>
 </ul>
 </nav>
 </header>
<!--/ヘッダーの右にメニュー２-->

/* ヘッダーの右にメニュー２ */
.header2{
 background: -webkit-gradient(linear, left top, left bottom, from(#ececec),to(#fff));　
 background: linear-gradient(#ececec, #fff);
 background-size: 100% 100%;
 height: 50px;
 border-bottom: 1px solid #dadada;
 }
 .header2 h1{
 display: block;
 height: 50px;
 width: 135px;
 line-height: 50px;
 font-weight: bold;
 margin-left: 5px;
 float: left;
 }
 .header2 nav{
 float: right;
 border-left: 1px solid #fff;
 }
 .header2 nav li{
 float: left;
 }
 .header2 nav li>a{
 text-align: center;
 display: block;
 width: 50px;
 height: 50px;
 }
 .header2 nav li:first-child>a{
 border-right: 1px solid #fff;
 border-left: 1px solid #dadada;
 }
 .header2 nav li:last-child>a{
 border-left: 1px solid #dadada;
 }

スワイプでスライドするメニュー

<h3>スワイプでスライドするメニュー（flipsnap.jsと連動）</h3>
<!--スワイプでスライドするメニュー-->
 <section>
 <div id="flipsnap5">
 <div><a href="#"><img src="banner.png" alt="バナー"></a></div>
 <div><a href="#"><img src="banner.png" alt="バナー"></a></div>
 <div><a href="#"><img src="banner.png" alt="バナー"></a></div>
 <div><a href="#"><img src="banner.png" alt="バナー"></a></div>
 <div><a href="#"><img src="banner.png" alt="バナー"></a></div>
 </div>
 <div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div>
 </section>
<!--/スワイプでスライドするメニュー-->

/* スワイプでスライドするメニュー */
.slide {
 width: 320px;
 overflow: hidden;
 background: #fff;
 margin: 0 auto;
 padding-bottom: 20px;
 }
 .flipsnap {
 display: -webkit-box;
 margin: 10px 0;
 }
 .item {
 width: 310px;
 }
 .pointer {
 text-align: center;
 }
 .pointer span {
 display: inline-block;
 width: 7px;
 height: 7px;
 border-radius: 5px;
 border: 1px solid #000;
 }
 .pointer span.current {
 background: #fc0;
 }

スワイプでスライドするjavascriptはいくつかありますが、今回はflipsnap.jsというスクリプトを使用させて頂いてます。

矢印つきリスト

<h3>矢印つきリスト</h3>
<!--矢印つきリスト-->
 <section>
 <ul>
 <li><a href="#">メニュー１</a></li>
 <li><a href="#">メニュー２</a></li>
 </ul>
 </section>
<!--/矢印つきリスト-->

/* 矢印つきリスト */
.list1 ul{
 border-bottom: 1px solid #ccc;
 }
 .list1 ul li{
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 border-bottom: 1px solid white;
 border-top: 1px solid #ccc;
 height: 44px;
 margin: 0;
 }
 .list1 ul li a{
 color: #333;
 display: block;
 height: 44px;
 margin: 0;
 padding: 0 0 0 10px;
 overflow: hidden;
 text-overflow: ellipsis;
 text-decoration: none;
 font-weight: bold;
 white-space: nowrap;
 line-height: 44px;
 }
 .list1 ul li a::after{
 content: url(list_mark1.png);
 float: right;
 }

矢印つきリスト２

<h3>矢印つきリスト２</h3>
<!--矢印つきリスト2-->
 <section>
 <ul>
 <li><a href="#">メニュー１</a></li>
 <li><a href="#">メニュー２</a></li>
 <li><a href="#">メニュー３</a></li>
 </ul>
 </section>
<!--/矢印つきリスト2-->

/* 矢印つきリスト２ */
.list2 ul{
 margin: 10px;
 }
 .list2 ul li{
 overflow: hidden;
 margin: 0;
 width: 100%;
 text-align: left;
 padding: 0;
 border: 1px #ccc solid;
 border-bottom: 0;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 display:block;
 -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1);
 box-shadow:0px 3px 3px rgba(000,000,000,0.1);
 }
 .list2 ul li:first-child{
 border-radius: 8px 8px 0 0;
 }
 .list2 ul li:last-child{
 border-radius: 0 0 8px 8px;
 border-bottom:1px #ccc solid;
 }
 .list2 ul li a{
 color: #333;
 display: block;
 height: 44px;
 margin: 0;
 padding: 0 0 0 10px;
 overflow: hidden;
 white-space: nowrap;
 line-height: 44px;
 text-overflow: ellipsis;
 text-decoration: none;
 font-weight:bold;
 }
 .list2 ul li a::after{
 content: url(list_mark1.png);
 float: right;
 }

サムネイルつき矢印リスト

<h3>サムネイルつき矢印リスト</h3>
<!--サムネイルつき矢印リスト-->
 <section>
 <ul>
 <li><a href="#"><img src="thumbs.png"><strong>メニュー１</strong>テキストテキストテキスト</a></li>
 <li><a href="#"><img src="thumbs.png"><strong>メニュー２</strong>テキストテキストテキスト</a></li>
 </ul>
 </section>
<!--/サムネイルつき矢印リスト-->

/* サムネイルつき矢印リスト */
.list3 ul{
 border-bottom: 1px solid #ccc;
 }
 .list3 ul li{
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 border-top: 1px solid #ccc;
 height: 70px;
 margin: 0px;
 }
 .list3 ul li a{
 background: url(list_mark1.png) no-repeat 100% 50%;
 color: #666;
 display: block;
 height: 70px;
 margin: 0;
 padding: 0 20px 0 0;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 text-decoration: none;
 }
 .list3 ul li img{
 float: left;
 height: 70px;
 width: 70px;
 margin-right: 10px;
 }
 .list3 ul li a strong{
 color: #000;
 display: block;
 font-weight: bold;
 padding-top: 17px;
 }

サムネイルつき矢印リスト２

<h3>サムネイルつき矢印リスト２</h3>
<!--サムネイルつき矢印リスト2-->
 <section>
 <ul>
 <li><a href="#"><img src="thumbs.png"><strong>MENU1</strong>texttexttext</a></li>
 <li><a href="#"><img src="thumbs.png"><strong>MENU2</strong>texttexttext</a></li>
 <li><a href="#"><img src="thumbs.png"><strong>MENU3</strong>texttexttext</a></li>
 </ul>
 </section>
<!--/サムネイルつき矢印リスト2-->

/* サムネイルつき矢印リスト２ */
.list4 ul{
 border-bottom: 1px solid #ccc;
 margin-left: 10px;
 margin-right: 10px;
 }
 .list4 ul li{
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 border-top: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 height: 45px;
 margin: 0px;
 }
 .list4 ul li a{
 background: url(list_mark1.png) no-repeat 100% 50%;
 color: #666;
 display: block;
 height: 45px;
 margin: 0;
 padding: 0 20px 0 0;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 text-decoration: none;
 }
 .list4 ul li a strong{
 color: #000;
 display: block;
 font-weight: bold;
 padding-top: 5px;
 }
 .list4 ul li img{
 float: left;
 height: 45px;
 width: 45px;
 margin-right: 10px;
 }

サムネイルつき矢印リスト２列

<h3>サムネイルつき矢印リスト２列</h3>
<!--サムネイルつきリスト2列-->
 <section>
 <ul>
 <li><a href="#"><img src="thumbs.png"><strong>MENU1</strong>texttexttext</a></li>
 <li><a href="#"><img src="thumbs.png"><strong>MENU2</strong>texttexttext</a></li>
 <li><a href="#"><img src="thumbs.png"><strong>MENU3</strong>texttexttext</a></li>
 <li><a href="#"><img src="thumbs.png"><strong>MENU4</strong>texttexttext</a></li>
 <li><a href="#"><img src="thumbs.png"><strong>MENU5</strong>texttexttext</a></li>
 <li><a href="#"><img src="thumbs.png"><strong>MENU6</strong>texttexttext</a></li>
 </ul>
 </section>
<!--/サムネイルつきリスト2列-->

/* サムネイルつき矢印リスト２列 */
.list5 {
 margin: 10px;
 }
 .list5:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }
 .list5 ul{
 border-top: 1px solid #ccc;
 }
 .list5 ul li{
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 border-top: none;
 border-bottom: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 height: 45px;
 margin: 0px;
 }
 .list5 ul li:nth-child(odd) {
 float: left;
 width: 50%;
 }
 .list5 ul li a{
 color: #666;
 display: block;
 height: 45px;
 margin: 0px;
 padding: 0 20px 0 0;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 text-decoration: none;
 }
 .list5 ul li a strong{
 color: #000;
 display: block;
 font-weight: bold;
 padding-top: 5px;
 }
 .list5 ul li img{
 float: left;
 height: 45px;
 width: 45px;
 margin-right: 10px;
 }

アコーディオン

<h3>アコーディオン（acordion.jsと連動）</h3>
<!--アコーディオン-->
 <section>
 <dl>
 <dt>タップで開閉<span>open</span></dt>
 <dd>
 <p>テキストテキストテキストテキスト<br>
 テキストテキストテキストテキスト</p>
 </dd>
 </dl>
 </section>
<!--/アコーディオン-->

/* アコーディオン */
.list6 dl.acordion{
 margin: 0 10px 0 10px;
 }
 .list6 dt.trigger {
 background: #9bd8ff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b9e4ff), to(#62b5ea));
 background: #9bd8ff linear-gradient(#b9e4ff, #62b5ea);
 border-radius: 10px;
 text-align: left;
 border: 1px solid #ccc;
 color: #000;
 margin-bottom: 0;
 padding: 10px;
 }
 .list6 dt.active{
 border-radius: 10px 10px 0 0;
 }
 .list6 dt.trigger span.open-close {
 background: url(point_plus.png) no-repeat right top;
 float: right;
 width: 20px;
 height: 20px;
 text-indent: -9999em;
 }
 .list6 dt.active span.open-close {
 background: url(point_none.png) no-repeat right top;
 float: right;
 width: 20px;
 height: 20px;
 }   
 .list6 dd.acordion_tree{
 padding: 10px;
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0));
 background: #9bd8ff linear-gradient(#fff, #f0f0f0);
 border: 1px solid #ccc;
 border-top: none;
 }

$(document).ready(function(){
  //acordion_treeを一旦非表示に
  $(".acordion_tree").css("display","none");
  //triggerをクリックすると以下を実行
  $(".trigger").click(function(){
    //もしもクリックしたtriggerの直後の.acordion_treeが非表示なら
    if($("+.acordion_tree",this).css("display")=="none"){
         //classにactiveを追加
         $(this).addClass("active");
         //直後のacordion_treeをスライドダウン
         $("+.acordion_tree",this).slideDown("normal");
  }else{
    //classからactiveを削除
    $(this).removeClass("active");
    //クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ
    $("+.acordion_tree",this).slideUp("normal");
  }
  });
});

CSS3ボタンいろいろ

<h3>CSS3ボタンいろいろ</h3>
<!--ボタンいろいろ-->
 <section>
 <a href="#">ボタン１</a>
 <a href="#">ボタン２</a>
 <a href="#">ボタン３</a>
 <a href="#">ボタン４</a>
 <a href="#">ボタン５</a>
 </section>
<!--/ボタンいろいろ-->

/* ボタン */
a.btn1{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #000;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
border-radius: 10px;
border: 1px solid #63b7ec;
font-weight: bold;
background: #9bd8ff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b9e4ff), to(#62b5ea));
background: #9bd8ff linear-gradient(#b9e4ff, #62b5ea);
}
a.btn2{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 1px #666;
border-radius: 10px;
font-weight: bold;
background: #e22092 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f45cb5), to(#e22092));
background: #e22092 linear-gradient(#f45cb5, #e22092);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
box-shadow: 0 1px 3px rgba(0,0,0,0.6);
border-bottom: 1px solid rgba(0,0,0,0.25);
}
a.btn3{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #666;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
border-radius: 3px;
border-top: 1px solid #ccc;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #ccc;
font-weight: bold;
-webkit-box-shadow: 1px 1px 2px #e7e7e7;
box-shadow: 1px 1px 2px #e7e7e7;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),         color-stop(0.01, #f1f1f1),
color-stop(0.5, #f1f1f1),
color-stop(0.99, #dfdfdf),
to(#ccc));
background: linear-gradient(#fff, #f1f1f1 1% , #f1f1f1 50% , #dfdfdf 99%, #ccc);
}
a.btn4{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
border-radius: 5px;
border-top: 1px solid #d25f11;
border-right: 1px solid #d25f11;
border-bottom: 1px solid #b85511;
border-left: 1px solid #d25f11;
font-weight: bold;
-webkit-box-shadow:inset 0 1px 0px #ffc290;
box-shadow:inset 0 1px 0px #ffc290;
background: -webkit-gradient(linear, left top, left bottom, from(#fe923b), to(#e26411));
background: linear-gradient(#fe923b #e26411);
}
a.btn5{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #fff;
text-decoration: none;
text-shadow: 1px -1px 1px rgba(0,0,0,0.25);
border-radius: 5px;
border:1px solid #000;
font-weight: bold;
background: -webkit-gradient(linear, left top, left bottom, from(#4f4f4f),
color-stop(0.48, #323232),
color-stop(0.5, #000),
to(#121212));
background: linear-gradient(#4f4f4f, #323232 48% , #000 50%, #121212);
}

追記

あくまで自分用なので、適宜書き換えて使用してくださいー。

今回はデザインのお勉強ではなく、趣味に走ったチュートリアル記事を書きます。

たま～に若い女の子向けのグラフィックデザインをやるのですが、
マスキングテープを使ったデザインをよく作ります。
その素材のチュートリアルを個人的なメモとして記録しておきます。
我流なので、参考になるか分かりませんが森ガールテイストのデザインを作る際などにお役立てください。

マスキングテープ、かわいいですよね。個人的にも集めてたりします。
mtって略すらしいですが、どうしてもMovableTypeしか浮かばないのでマステって略してます…

こういったものをつくっていきます

1.長方形を描く

まずPhotoshopのカンバスに長方形ツールで適当に長方形を描きます。

2.パターンを入れる

柄を入れたい場合はこの時点で適当に入れておきましょう。結合しちゃっていいです。
（あとで編集したいかも、って時は複製して非表示にしとくなどしてバックアップしましょう）

3.質感を出す

このままでもいいのですが、少し質感を出すために「フィルタ」→「ノイズ」→「ノイズを加える」で2～4%ほどノイズを加えます。
ごく少量のノイズを加えるとちょっと紙っぽくなるので万能ですよ！

4.ちょっと曲げてみたり？

まっすぐの長方形だとどうしてもCGっぽくなっちゃうので、真ん中あたりから左を選択して少しだけナナメに曲げてみます。ほんのちょっとだけ！
つなぎ目が不自然にならないように修正してください。

5.端をカット

消しゴムツールを使ってはじっこをカットします。
ギザギザにしたり、手でちぎった感じにしたり、、、

6.シワを作る

これで完成！でもいいのですが、どうせならってことでもうちょっと細かく作っていきます。
ペンツールで光源側に白のハイライトを、反対側に乗算でカゲの色を描いていきます。
不透明度をいじったり、ぼかしたりしつつ・・・

7.貼りつけてみよう

作ったものをこんな感じで貼る場合は、不透明度を75%ぐらいにすると、なじんで可愛いです。

こんな手順で、素材や写真だけでなく自分で量産してデザインしてくと幅が広がりますのでぜひ！

「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。
なんだかすごく中二心をくすぐられる言葉ですね。

「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。

簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。
こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。
テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置するように心がける、というものです。

これはドキュメントを読む際の視線の動きであって、媒体によって効果的な導線が異なってきます。

Z型パターン

紙媒体（横書き）の紙面なんかで
「左上→右上→左下→右下」とZの形にユーザーの視線が移動するため、
この導線上に重要なエレメントを配置しましょう、といった考え方です。

F型パターン

こちらはwebにおける視線移動の研究から提唱された、
比較的新しいパターンです。
まずはロゴ部分からヘッダーが目に入り、
続いて見出し・メニュー、記事…と読み進めていくような移動です。
レイアウトによって変わってくると思いますが、
やはり目立たせたいエレメントは左上に配置するのがベターなようです。

目標からレイアウトを逆算する

当たり前ですが、視線の流れは無意識によるものだけではなく、デザインの効果によって変わります。
サイトの目標をしっかりと設定し、ユーザーがどう行動するか、導線を考えて設計することが大切です。

見た目がキレイならいいってもんじゃない

同一色・同系色の配色は、デザインがまとまりやすく洗練された印象を覚えますが、
上の画像のように、見出しと本文が一瞬で判断できないと視線が迷ってしまいます。
また、文字サイズの大きさをあまり変えないと、落ちついたデザインになりますが、
ジャンプ率が低くなり、パッと見た時にどの文章を読めばいいのかわからなくなってしまいます。

デザインによる誘導

このようなレイアウトの場合、

配色による視線誘導

コンテンツ３カラムのうち重要な１つのみにアクセントカラーを置き、視線を誘導します。

逆に言えば、横にいくつものコンテンツを並列した場合に通常の視線の流れから考えて
左から読ませたいと考えていても、誘目性の高い色を一番左以外に使うと読み飛ばされてしまう危険性があります。

ジャンプ率による視線誘導

見出しに目が行き、一目で重要度が分かります。

webサイトをデザインする際は、コンテンツの重要度を把握した上でのレイアウト・ビジュアルデザインを意識したいですね。

さて続きです。
前回非デザイナーのためのエントリーだからwebサイトじゃなくてチラシにしよう、と思って記事を書いたんですが
駆使するツールがもちろんweb上にあるものなので、カラーもweb用になってることを失念していました。
紙媒体とwebの違いはかなりあって、それこそレイアウトの方法も変わってくるので重要なところなんですが、
書くと長い上、デザインとは別の話になっちゃうので、
今回はweb上に表示するDMとチラシを作る方法ってことにしておきます。無理があるけど・・・
印刷物を作りたい方は「DTP」とか「CMYK　RGB」とか「web 紙　解像度」とか「トンボ」とかそのへんのワードで検索してください。
CMYKと解像度の違いが理解できれば、以下の方法で進めても大きな失敗はないと思います・・・

レイアウト

さて本題です。

前回用意したラフです。

まずは画像編集ソフトで適当な大きさのキャンパスを作ります。
ここでは600pixel×400pixelのキャンパスを作ってみました。

１・イメージ画像を決める

1番最初に目に入ってくるのは文字情報よりイメージ画像です。
「目に留めてもらう」という意味で、イメージが伝わりやすい画像を選びましょう。
また、配置も目立つ場所にしましょう。
写真素材やイラスト素材を購入またはダウンロードして、
（そのへんは紹介してるブログ等がいっぱいあるので探してみてください）
イメージの選定が難しかったら、似たような内容のサイトやチラシを見るといいかもしれないです。パクリはダメですが。
私の中でヘアサロンは裸の外国人女性みたいなイメージがあるので、今回は市販の写真素材CDから下の写真を選びました。写真の左側が切れてるので左寄せにしました。

このままだと右側に空白が入っていて変ですね。
イメージを押し出すような写真では境界線が直線だとダサくなりがちなので写真が背景となじむようにします。

写真をレベル補正してコントラストを調整し、背景を白く飛ばしたり…

消しゴムやフィルタで境界が見えなくなるようボカしたり・・・

パスで切り抜いて背景を削除したり・・・
（参考)Photoshopのクリッピングパスによる写真切り抜き – 独学WEBデザイナーの覚書

いっそキャンパス全体に背景として配置してみたり…

個人的にはキャンパス全体に写真が入ってるのが好きなのですが、文字を入れたら顔にかぶってしまうので、まぁ適当にぼかしておきました。

２・文字要素の配置

文字を入れていきます。

前回配色を決定しましたが、とりあえず一旦色のことは忘れてください。
デザインに慣れてると気にならないのですが、
レイアウトする際に最初から配色を取り入れると色のイメージに左右されてうまくレイアウトできなかったりします。
なので、ここでのデザインは白と黒の２色だけ使ってすすめます。

文字要素を入力しました。

レイアウト

レイアウトは奥が深く、とても難しいのですが、
ある程度技法を覚えてしまえばイメージに沿って当てはめていくことで、それっぽいものが出来上がります。

ちょっと字が小さくて申し訳ないです。ここでは、

■余白をたっぷりと意図的に取る
■字と字の間隔をあけて、密度感を低く
■大見出しはもっとも目立たせる
■サブタイトルを入れて写真やタイトル部分を洗練させる
■情報部分はゴシック体にして差別化
■罫線を使って情報を整理
■文字のサイズ差をあまりつけないことで、落ち着いたイメージに

こういった技法を使っています。
特に余白は大事なので、ぜひ試してみてください。
他にも、

■背景と文字のコントラストは低めに
■色の彩度は低めに
■同系色でまとめる
■斜体を使う

などの手法も、シンプルで洗練されたイメージになります。縦書きなんかも効果的です。

配色

レイアウトしたら、色をつけていきます。

これが前回選んだ配色です。

配色ツールに頼った理由は２つあるのですが、
１つは非デザイナーのためのエントリなので、感覚ではない方法で配色を決定させたかったのと、
もう１つはデザインしながら色を変えていくと「アレ…これもいいな…こっちのがいいかな？」と
選べなくなってしまいがちだからです。なので慣れないうちは決め打ちしていく方法のが楽です。
少なくとも極端にダサくなることはなくなると思います。

色を入れてみました。いかがでしょうか。
やわらかく、女性的で落ち着いたイメージのデザインになりました。
同系色なので、ボンヤリした印象になりがちですが、
ピンクのラインを入れることで、白とピンクの面積比に差をつけ、メリハリが出ます。
また上下に同じ色を使うと、字を読む時のリズムが出るそうです。
差し色で1色だけ系統以外の色を入れたりしてもメリハリが出て強い印象になりますよ。

もうひとつ

フットサルのチラシもデザインしました。

まずは白黒で文字いれ。
(イラスト素材は　イラスト無料素材　子供や赤ちゃんのイラストわんパグ　からお借りしました。）

配色とレイアウト技法を追加。
この例では

■使用する２つの絵の大きさに差をつけ、メリハリのある印象にする（ジャンプ率を高く）
■文字もタイトルと他の文字の大きさをかなり変えて、活動的なイメージに
■背景と文字の明度差を高くし、視認性を高めて強い印象に
■タイトルをグリッドに沿わずにナナメにすることで、遊び心のある活発なイメージに

こんな技法を使っています。
他にも、

■袋文字（フチドリ）
■色数を増やす
こういうデザインも、活動的な印象になるので有効ですよ。

まとめ

とにかく重要なのは、イメージを決定することです。
まずイメージを決めて、そこに色や技法を当てはめていけば、
非デザイナーでも感覚を使わずにある程度デザインできるのではないでしょうか。
そして、電車の広告や、街で見かける看板、チラシなどのデザインを「逆引き」してみてください。
普段からデザインされたものに印象を左右されてることに気付くと、デザインはとても面白いです。

⇒非デザイナーのためのデザイン基本テクニック　その１へ

▼どうせ買うならAmazonアソシエイトで私に貢ごう！

レイアウトデザインのルール ―目を引くページにはワケがある。 オブスキュアインク ワークスコーポレーション 2008-02-05 売り上げランキング : 22006 Amazonで詳しく見る by G-Tools

▼どうせ買うならAmazonアソシエイトで私に貢ごう！

新人デザイナーのためのデザイン・レイアウトが上手になる本 柘植 ヒロポン ソシム 2008-07 売り上げランキング : 107361 Amazonで詳しく見る by G-Tools

デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、
今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。
記事内ではphotoshopを使用していますがphotoshopが使える方は少ないかもしれません。
ですがfireworks、パワポやwordでも要点をおさえれば「極端にダサくない」程度のデザインはできます。

まずはラフ

まずは作りたいものの原稿を用意しましょう。
今回はサンプルとして
「ヘアサロンのＤＭ」と「フットサル大会のチラシ」を作ってみます。

ラフすぎるにも程があるラフのできあがり。

イメージを決める

ただキャンパスを開いても何も思いつかないと思います。
まずは作りたいもののイメージを確定することからはじめましょう。
下図のような反対の意味を持つイメージをならべて、どちらに近いかをチェックしていくやり方は、
数値的に後述の配色やフォントを決定しやすいので、イメージが固まりやすいです。（クリックで拡大）

イメージからフォントを選ぶ

フォントから伝わるイメージは強いです。
フォントは大きく分けて「明朝体」と「ゴシック体」に分類することができます。

【明朝系】　女性的、高級感、繊細（可読性が弱めなので多用には注意）
【ゴシック系】　　男性的、モダン、信頼感、シャープ
【丸ゴシック系】　ポップ、やわらかい、チープ
【行書体など】　和風、伝統的

また、ウェイトによっても太くなれば力強いイメージに、細くなれば繊細なイメージになります。
フリーでも多数のフォントが配布されているので、イメージに近いフォントを選びましょう。

以下は私がよくお世話になっているフォント配布サイトやまとめ記事です。

マニアッカーズデザイン
フォント・マネージメント 日本語フォント 欧文フォント | DesignWalker
Top 28 Free Font Directory Resource Sites :Speckyboy Design Magazine
街でみかけた書体
ドケチなのに良質な無料漢字フォントを探している人向けフォント大全集｜| ＾＾ |秒刊SUNDAY

ヘアサロンは明朝系、フットサルはウェイトが太いゴシック系にすることにしましょう。

※商用利用不可のフォントもあります。ダウンロードの際はリンク先の規約を必ず一読した上で従ってご利用ください。

イメージからメインカラーを選ぶ

配色はデザインにおいて、とても重要な要素です。
大きくわけて、「色相」と「トーン」でイメージが決定します。

色相によるイメージ

【■赤】 原始的、野性的、生命、性、生きる、情熱、怒り
【■橙】 現実的、活動的、人間的、家庭的、明快、労働、嫉妬
【■黄】 好奇心、知性、注意力、向上心、欲求、希望、光明
【■緑】 社会性、調整、平和、バランス、協調、新鮮、安全、青春
【■青】 理性的、抑制、理解、思慮深さ、悠久、清澄、厳粛、誠実
【■青紫】 精神的、孤独、気品、高貴、安定、洗練
【■紫】 非現実的、霊的、神秘、死、高位、優美、魅惑

トーンによるイメージ

【■ビビッド・トーン】 冴えた、鮮やかな、派手な目立つ、活き活きした
【■ブライト・トーン】 明るい、健康的な、陽気な、華やかな
【■ストロング・トーン】 強い、くどい、動的な、情熱的な
【■ディープ・トーン】 深い、濃い、充実した、伝統的な、和風の
【■ライト・トーン】 浅い、澄んだ、子供っぽい、さわやかな、楽しい
【■ソフト・トーン】 柔らかな、穏やかな、ぼんやりした
【■ダル・トーン】 鈍い、くすんだ、中間色的
【■ダーク・トーン】 暗い、大人っぽい、丈夫な、円熟した
【■ペール・トーン】 薄い、軽い、あっさりした、弱い、女性的、若々しい、優しい、淡い、かわいい
【■ライトグレイッシュ・トーン】 明るい灰みの、落ち着いた、渋い、おとなしい
【■グレイッシュ・トーン】 灰みの、濁った、地味な
【■ダークグレイッシュ・トーン】 暗い灰みの、陰気な重い、固い、男性的

[引用元]IROUSE/色彩・カラーコーディネート・ファッションイメージの情報サイト
[参考]What’s Color?-色のしくみ/色相とトーン
[参考]トーン別のカラーチャート

ヘアサロンは女性的で高級感のあるイメージなので「少し濁ったピンク系」
フットサルは元気でにぎやかなイメージなので「幼く明るい水色系」を使うことにしましょう。

イメージから配色を選ぶ

配色を行う際はメインカラー以外にもサブカラー２、３色・アクセントカラー1色くらいを決めておくといいでしょう。
配色には小難しい名前の方法が色々あるのですが、あくまで非デザイナーのためのまとめなので、飛ばします。

[参考]COLOR NOTE > 配色のコツ > 配色技法①

配色の知識がなくても下のような配色サイトを使えばチートできます。
kuler

私がよく使っているのはkulerというサイトで、検索ボックスに「woman」などとイメージを入力すれば女性的なイメージの配色がズラズラと出てくるのでとても便利です！

COLOURlovers

こちらもおすすめ。配色サイトは多数ありますので、ぜひ活用してください。

ヘアサロンはCOLOURloversにて「salon」で検索、
フットサルはスカイブルーのカラーコードで検索して出てきた配色の中から以下の配色に決定しました。

次回はいよいよ制作編！

イメージ・フォント・配色が決定したところで長くなってしまったので次回に続きます！
⇒非デザイナーのためのデザイン基本テクニック　その２へ

追記

はてなのホットエントリにあがったようで、想像をはるかに超えたアクセスがあり、驚いています。ありがとうございます。
沢山の人が閲覧することを想定しておらず、言葉足らずな部分もありましたので追記いたします。

※まず、いつも私が感覚でやっていることを無理矢理説明してるので、
　 他のデザイナーさんから見ると違和感があると思います。
　 デザイナーによって作り方はだいぶ異なりますので、もちろんこれが正解ではありません。
　 あくまでも「私のやり方を説明するとこうなる」と思ってください。
※フォントについて
　 リンク先にも注釈がありますが、商用利用不可のフォントもあります。私の思慮不足です。
　 ダウンロードの際はリンク先の規約を必ず一読した上で従ってご利用ください。

引っ越してから前より料理をするようになりました。
カウンターキッチンになったのが嬉しいっていうのもあるんですが、引越しでかなり散財してしまったので節約も込めて。
それで、お昼はお弁当を作るようにしています。

でもめんどい

うちは朝が苦手だし、同居人のほうが早く家を出るので、前日の晩ごはんの残り物なんかを夜のうちに詰めてるのですが、
晩ごはんの内容によっては残り物で作るのが難しいときがあります。
（麺類やどんぶりもの・カレーなど・・・）
その日はイチからご飯を炊いたり、おかず作りをしなきゃいけなくてかなり面倒・・・。
お弁当を毎日作ってる人は偉い！えらすぎる。

いいもの見つけた！

そんなこんなで結局お昼は買って食べたりとかしていたのですが、ある日こんなものを発見！

ランチde丼　-　オーエスケー

丼ものや麺類が入れられるお弁当箱！とな！
これならおかずも作らなくていいし、さくっとお弁当が作れる！

というわけで、ほしがってたら同居人がプレゼントしてくれました。ありがとう！

さっそく使ってみる

ぶっかけうどん

1. つゆを入れるケースと薬味を入れるケースが付属しているので、それにつゆと薬味を詰める。
2. うどんは冷凍うどんをチンして流水で冷やして、器に入れる。すのこがついているので水切りも完璧。
3. おしまい。

忙しい朝でも5分くらいで出来ちゃいます。

バターチキンカレー

1. 前日に作ったカレーをつめる
2. 前日に炊いて冷蔵しておいたご飯をつめる
3. おしまい。

特に夏場なんかはご飯と汁気のあるものを一緒にしておくと腐りやすいので、別々に保存できるのはいいですね。
会社についたら冷蔵庫にいれて、お昼休みに丼と中皿をチンします。

使ってみた感想

• 付属品が多いので洗い物がちょっと大変。　－　まあ会社でチャチャッとやっちゃってます。
• 若干かさばるかな。　－　普通のお弁当箱くらいの大きさだけど、私のバッグだとちょっとかさばるｗ
• 予想以上にご飯が入る。　－　男性にもおすすめ。
• とにかくらくちん。

よい買い物をしました！
しかしキッチン用品とかは、アイデア商品が多くて見てるだけで楽しいですね～

▼どうせ買うならAmazonアソシエイトで私に貢ごう！

昼飯丼 ランチde丼 レッド DON-1 オーエスケー 売り上げランキング : 2056 おすすめ平均 Amazonで詳しく見る by G-Tools

▼どうせ買うならAmazonアソシエイトで私に貢ごう！

昼飯丼 ランチde丼 ブラック DON-1 オーエスケー 売り上げランキング : 2064 おすすめ平均 Amazonで詳しく見る by G-Tools

そんな中でもＣＳＳを使って雑誌風の装飾を実現することができます。
その中から今回は3点ほど、テクニックをご紹介します。

デザインラフを作る

↑デザインラフ。これをもとにコーディングしていきます。

コーディング

↑htmlのみコーディングした状態

<div class="block">
<div class"box">
<img src="photo.png" alt="極・エスプレッソ" class="mainImg" />
<div class="entry">
<div class="entry_box">
<span class="vol">VOL<span class="number">01</span></span>
<span class="date">31.MAY.2010</span>
</div>
</div>
<h2><img src="h2.png" alt="じっくりと仕上げた、極上の一杯。" /></h2>
<p>美味しいコーヒー屋さんのコーヒーはいくらでもあるが、こんなにこだわった美味しい「缶コーヒー」がいまだかつてあっただろうか。2010年6月1日、（株）○×飲料から発売される缶コーヒー飲料、「極・エスプレッソ」は缶コーヒーの常識を超えた、まったく新しい缶コーヒーだ。朝、自動販売機で120円で買える缶コーヒー。こんなにも贅沢な味わいがこんなに手軽に楽しめて、良いのだろうか･･･。
</p>
</div>
</div>

↑スタンダードにＣＳＳコーディングした状態

.block{
background:url(bg1.jpg) no-repeat;
width:600px;
height:309px;
margin-top:30px;
padding-top:30px;
}
.box{
border:1px solid #000;
width:525px;
margin:auto;
background:#fff;
padding:10px;
}
p{
color:#595858;
font-size:77%;
}
/*mainImg*/
.mainImg{
float:right;
}

ボックスから画像をはみ出させる

/* mainImg */
.mainImg{
float:right;
margin:-35px -40px 0 10px;
position:relative;
}

ネガティブマージンを使って画像をボックスからはみ出させます。
ＩＥでは親要素のborderより外側が非表示になるため、position:relative;を指定します。

日付の見出しを装飾する

/* entry date */
.entry_box{
width:80px;
float:left;
color:#6f0d3b;
font-family:Arial, Helvetica, sans-serif;
}
.entry_box span.vol{
display:block;
width:80px;
font-weight:bold;
font-size:20px;
border-bottom:1px solid #6f0d3b;
}
.entry_box span.number{
font-size:35px;
}
.entry_box span.date{
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
h2{position:relative; margin:-2px 0 -10px 80px;}

ブログなどでもよく見る日付の装飾ですが、ここを作りこむことによってデザインが洗練されると思います。
また画像ではなく敢えてCSSで装飾することによって、汎用的に使うことができます。
極力htmlの文書構造を崩さないように、htmlはできるだけ簡素にしました。
サンプルのように、見出しなどをfloatさせない場合はenrtyにclearfixを使用してください。

文字を両揃えにする

p{
text-align:justify;
text-justify: distribute-all-liens;
}

紙媒体では当たり前に行われていることですが、文字を両揃えにするだけでかなりパッと見が綺麗になります。
webではあまりなじみのない「文字組」ですが、CSSで実現できるので作りこんだデザインを行う際は参考にしてください。
text-justifyというプロパティはIE独自の規格です。また、OperaやSafariでは日本語テキストには適用されないようです。

完成

demo / download

まだゴチャゴチャ～っとしてますが、とりあえず引越し完了しました。
これからも宜しくお願い致します。

引越しに伴い、色々と新しくすることにしました。
細かいところですが、

請求書・見積書などの書類のデザインとか。
名刺や封筒など、まだまだ手付かずのものもありますが、
住所変更するなら一新しちゃえ～と、各ビジネスツールを新しく制作しています。
実は、ロゴもちょっと変わってます。
サイトもリニューアルをすすめているところです。5月中には公開したいですね。
心機一転、仕事も頑張っていきます！！

引越しは色々やることがあって大変ですね・・・
ＧＷ中はずっと荷解きや各種手続きに追われてました。
落ち着くのはまだまだ先になりそうです。

最寄りは中央線の武蔵境になります。
人に遊びにきてもらえる家にしたいので、近所まで来た際は、ぜひお立ち寄りください～。

あこがれだった対面キッチン！

リビング反対側。１８畳あります！ひろくてきれい。

システムキッチン。写真だとわからないですが、３口コンロだし、収納たっぷりです。

バス。めっちゃきれいです。もともと大家さんが住む予定だったようで、ムダにバリアフリーです。

手続きや引越し作業など、しばらく忙しくなりますが、
落ち着いた折にはぜひ遊びに来て下さい！