投稿 レンタル倉庫看板反響！ は SOSOGoo DIY STAND に最初に表示されました。
]]>こんにちは！tsuneです！
皆さま、レンタル倉庫ってご存知でしょうか？？
自分の家のスペースとは別に整理や引っ越し、趣味などで新たにスペースが欲しいお客様にお貸ししているスペースのことです！
そんなレンタル倉庫の看板を以前、デザインしました！
前の看板がかなり前から使用していたこともあり、色あせてボロボロの状態でした。(>_<)
レンタル倉庫に大々的なテコ入れはできないため、看板一つでどうにか改善できないか実験した案件になります！
それではGO！！！٩( ‘ω’ )و
看板デザイン
看板変更前はこのような感じでした、、、、（涙）
看板自体が色あせてしまって、ボロボロです、、、、
実際にこの状態で契約数がなく、新規のお客様もつきませんでした。
そこでテコ入れです！！！
とにかく目立つようにして目に入れてもらえれば、立地的には難しい場所ではありません！！
まず、目立つ色を使用し、値段・サービスを一目見て理解して頂けるようにレイアウトしました。
道路に看板自体が面しているので通過時に見ることを想定して文字の大きさにも注意しましたね！今回のレンタル倉庫は格安が売りなので値段は目立つ位置に置きました。
完成した看板がこちらです！
周りがわりと大人し目の建物だらけなのでこのバチっとした色の看板はかなり目立ってます(^ ^)
まとめ
設置後に、かなり目立っていたのでやりすぎたかな？と思っていたのですが、ちょくちょくレンタル申し込みの連絡が来るようになり埋まってきています。
看板とかをデザインした時にいつも思いますが、集客に繋がるか不安です。いい効果が発揮できているとなると安心と自信に繋がりますね！
投稿 レンタル倉庫看板反響！ は SOSOGoo DIY STAND に最初に表示されました。
]]>投稿 ②Illustratorで雲を作ろう！ は SOSOGoo DIY STAND に最初に表示されました。
]]>こんにちは！tsuneです！
前回に雲の作り方①をしました！記憶にございますでしょうか？？
アンカーポイントを追加し、効果（膨張）で作るやり方ですね！
前回の記事のおさらいはこちらからお願いします！
それでは、もっともオススメする雲の描き方のもうひとパターンをご紹介します！GO！！！！٩( ‘ω’ )و
雲作成パターン②
①まず、前回同様に楕円形ツールで適当な大きさの楕円を描きます。(command＋L）
②次に同じ楕円ツールで先ほど描いた楕円の線に沿って大小様々な楕円を置いていきます。
③楕円を全て選択し、パスファインダーの合体をすると全ての楕円が合体してごちゃごちゃとしていた線がひとつになります。
いかがでしょうか？簡単に雲ができたと思います。後は楕円を積み重ねる過程でどんな雲にしたいかでカスタムをすると理想の雲ができます！
まとめ
前回、ご紹介した作成方法よりも膨張部分に規則性がなくなり、より雲っぽくなったと思います！
同じ方法で三角などを合体すると吹き出しになりますよ！！
投稿 ②Illustratorで雲を作ろう！ は SOSOGoo DIY STAND に最初に表示されました。
]]>投稿 ①Illustratorで雲を作ろう！ は SOSOGoo DIY STAND に最初に表示されました。
]]>こんにちは！tsuneです！
以前、Illustratorでハートを作ろうをしました。今回は以前とは違う方法を使用して雲を作ってみます！
今回は2週にわたってお伝えしますね！私が雲を作る過程では２つあるのでそれをご紹介します！！！
それではGO！！！！٩( ‘ω’ )و
事前知識
それでは、雲を作る前に事前知識として名称等をおさらいしました。前回の「ハートを作ろう！」の冒頭で説明しているのでご覧ください。
Illustrator初見の方には事前知識がないと難しいかもしれません。
雲作成パターン①
①まず、楕円形ツールで適当な大きさの楕円を描きます。(command＋L）
②次にメニューからオブジェクト→パス→アンカーポイントの追加を選びます。
すると先ほど作成した楕円にアンカーポイントの点が増えていくと思います。
２回ほど繰り返しましょう！
ここまでの作業をすると画像のようになります。
③アンカーポイントが追加できた後はメニューにある効果→パスの変形→パンク・膨張を選びます。
今回は膨張の方に10％割り振ってみましょう！
すると画面内で楕円だったオブジェクトが雲型に変形するかと思います！
これで完成です！
方法がわかれば、後はアンカーポイントの数や割振り数で形を変えますのでお好みで作ってください！！
まとめ
それでは、来週にもうひとつのパターンをご紹介します！実は次週紹介します作成方法の方がおすすめです！
より自然に雲らしく出来ることと、自由度が違います！
それでは次週お会いしましょう！( ^_^)/
投稿 ①Illustratorで雲を作ろう！ は SOSOGoo DIY STAND に最初に表示されました。
]]>投稿 アパートの外観改善編② は SOSOGoo DIY STAND に最初に表示されました。
]]>先々週の話ですが、ipadを購入しました！
ちょっと使用してみた感想ですが、大変満足です！今では、べた惚れですよ( ´ ▽ ` )
ipadのお話はいつかシリーズとしてブログを書きますね！
外壁塗装
今回は、福岡県上津にある３階建物件です！
こちらの物件、部屋の状態もなかなかのものでして(^^;)
入居率アップを狙って、室内リフォームと外壁塗装を行いました。
施工前の様子がこちら↓
なんとも独特な形と配色をされています、、、、(^^;)
この付近は、綺麗な一戸建てが多く、静かな住宅街という感じでした。
劇的に立地が悪いわけではないのに入居率が３割ほど、、、、
綺麗にして満室を目指します！！
塗装デザイン
今回の塗装では、赤い階段は既存のまま使用という条件付きでした。
それだったら、赤が際立つようにシックな配色にしました。
後はひたすら建物の形に沿った配色パターンを作成しました。
今回の配色に落ち着いたのが、赤は塗料の値段が高いので塗る面積がすくなるなるようにと、縦にラインを入れると建物が高く見えますね！
ちなみに、建物の内側はかなり白に近いグリーンを入れています。薄めに入っているグリーンが赤を引き立てますね！後はグリーンは落ち着く色なので住居内側に入れてクリーンなイメージにしました。
まとめ
外壁塗装・部屋の施工を行い、募集したところ半年で３割だった入居状況がなんと満室に！！
実は、初めての外壁塗装デザインだったので内心ヒヤヒヤしていました。(･･;)
満室になったと一報をもらった時には嬉しかったです！
投稿 アパートの外観改善編② は SOSOGoo DIY STAND に最初に表示されました。
]]>投稿 清掃ホームページのイラストを作成！ は SOSOGoo DIY STAND に最初に表示されました。
]]>こんにちは！tsuneです！
つい先日、博多駅に行きました！そしたら、駅前の広場で毎年恒例のクリスマスイベントをしていましたね！
毎年毎年、珍しいものが売られているので見て回るのが楽しいです。今度行った時にはホットワインを飲んでみようかなと考えています！
それでは、本題に入りましょう！笑
今回も前回に引き続き、過去に作成したものの裏話です！
清掃サービス向けのホームページで使用するイラストを作成しました！
それではレッツゴー！٩( ‘ω’ )و
清掃HP？？どんなイラストが適切か？
やはり、清掃サービスのホームページということでイメージを崩してはいけません。
妙にリアルな絵や過激な描写はイメージダウンとなってしまいます。
今回は、最低限の線と色で簡潔なイラストにしました。
清掃に対するクリーンなイメージを意識して作成しました。例えるなら、教科書に載っているようなイラストですね。
出来るだけ線などを減らし、黒と白のバランスをとることで表現できていると思います。線も統一しているので統一感が出ています。
まとめ
デザインは作り手によってつくる世界は様々ですが、ターゲット・イメージなどなど意識して作成しなければ、結果はついてこないでしょう。
最大限の結果を想像してデザインするのもデザイナーとお仕事の１つと言えるかと思います。
ちなみに今回のイラストを使用したホームページはこちらです🎵
投稿 清掃ホームページのイラストを作成！ は SOSOGoo DIY STAND に最初に表示されました。
]]>投稿 ご案内チラシを作成しました は SOSOGoo DIY STAND に最初に表示されました。
]]>こんにちは！tsuneです！
近頃、寒くなってきましたね。
会社ではヒーターと膝掛けが手放せません！
このぬくぬくで平成最後の冬を耐えしのんでみせます！！( ‘ω’ )و
本日の記事は下記のページでもご紹介しておりますチラシです！
これのデザインができるまでをお話しします！🎵
提出資料は文章のみ！
デザインをしていると多々あることですが、ベースとなる資料は文章のみです！
チラシ作成の始まりとしてはこのような会話がありました。
依頼人 「この案件のチラシの作成をお願いしまーす」
私 「承知致しました！たたき台を作るので材料を送ってください！」
依頼人 「はいよー」 送信🎵
私 「ありがとうございます！」 ポチッとな
私 『、、、、文章のみや！』 「写真や雰囲気どうしますか？」
依頼人 「（私の名前）の自由で！！」
私 「マジですかっっっ！！」
こういう依頼は以外に沢山あります笑
心境としては、「わー！どうんなの作ろう！やり直しは嫌だな〜」とは思いますがこれまでのやりとりの中で自分に任せてもいいと判断して頂いたことに嬉しくもありですね！
「いいもの作ってやるぜ！！！」と意気込んでイラレを開きます笑
持論でもありますが、デザイナーはただ言われたことをやるだけの部品として動いていてはいつか限界が来ると感じています。
依頼主の意図を汲みとり、コミュニケーションを通して作り上げていくことが醍醐味だと思っております！！
チラシ作成
ある程度のターゲットやキャッチを話し合い、いざ作成開始！
今回はこんな感じの工程で進めました！
- 資料読み込み
何が重要で伝えたいかなど全体的な構成を読みながら練ります。
どこを図にしたらわかりやすいか、文字以外で表現できなかなどもここで考えます。 - 優先順位決定&レイアウト
内容ごとに固めたカテゴリの優先順位ごとに大まかなレイアウトを作成 - イラレでレイアウトにそって文字や図を配置
とにかく素材を作成しながら当て込んでいきます。 - 写真やカラーバランス確認
写真の選択や全体のカラーバランスをみて修正します。 - 位置や文字、レイアウトバランスなど細々修正
難しい内容のものほど、出来るだけ文字を図やイラストに変換するかが読みやすいチラシになるかどうかのコツだと思っています！
チラシが届いても文章の長いデザインが微妙なものは見ないし、見たとしても読み込みませんよね？？
それが直結して申し込みが来ないことになるのです！
今回は、資料では文字で表現していた事例は表に、１０年間での金額差は図として視覚化しました。
文字がただ並んでいるよりもより良く理解して頂けるのではないでしょうか！！
まとめ
こんなことを考えながら、デザインをしています。笑
ユーザーに対して適切なデザインを行うのは大変難しいですが、やり甲斐がありますね！！
ちなみに、ちょいちょい修正はありましたが一発OKが出ました！
こういうことが自信になってきますね！
投稿 ご案内チラシを作成しました は SOSOGoo DIY STAND に最初に表示されました。
]]>投稿 【初級編】Photoshopで写真の色を変えてみよう！ は SOSOGoo DIY STAND に最初に表示されました。
]]>こんにちは！tsuneです！
今回は、Photoshopで色の編集をしてみます。
今回はこの写真を加工します！1番手前の水色の鶴を暖色にしようと思います！
それではレッツゴー！٩( ‘ω’ )و
色を変更したい部分だけ範囲指定しましょう！
クイック選択ツールで変更したい色の範囲をなぞっていきましょう！
綺麗に縁どってください！＿φ(￣ー￣ )
色を変更する前の下準備
順をおって説明します。
①まずは、現在１つのレイヤーをコピーして２つにしてください。
②コピーしたレイヤを選択したままウインドウの右下の左から3番目にあるカメラのアイコンの形をした「マスク」をクリックします。
③「マスク」をかけるとレイヤーの中に黒の画像が追加されます。そうしたら左側の元の画像の方を選択してください。
色を変更しましょう
メニューの中からイメージ＞色調補正＞色相・彩度を選択してください。
赤にしましょう
色相・彩度を選択すると画像のようなウインドウが出てきます。
今回は赤にするので右に振ります。いい感じの赤になるまで振りましょう。
完成まで
鶴の影も同じように色を変更したら、画像に違和感がなくなります。
完成です！！
まとめ
今回はお手軽に色を変えられる方法をご紹介しました！
この方法を実践した方もお気づきかと思いますが、色と色の境界線に色が残ってしまうことがあります。
実はこれも解決する方法があるのです！少し難しい作業になるのでまた次回にします！！
それでは次のBLOGで！！( ・∇・)
投稿 【初級編】Photoshopで写真の色を変えてみよう！ は SOSOGoo DIY STAND に最初に表示されました。
]]>投稿 【初級】②文字入力がめちゃくちゃ楽になるショートカットキー は SOSOGoo DIY STAND に最初に表示されました。
]]>こんにちは！tsuneです！
前回のBLOGで文字入力のショートカットキーを覚えたらかなり楽になったよ！という記事をあげました。
前回の続きと合わせて覚えておくと便利なショートカットキーをご紹介します！！
それではいってみよう！！٩( ‘ω’ )و
文字入力 その他
control＋Y：control＋Kで削除した文字を貼り付け
control＋O：カーソルの後ろに一行挿入
control＋T：カーソルの左側と右側の文字を入れ替える
F7:文字をカタカナにする
F8:文字を半角カタカナにする
F９v:文字を全角英数字にする
F10:文字を半角英数字にする
基本的なショートカットキー
command＋A：全てを選択
command＋C：コピー
command＋V：コピーしたものを貼り付け
command＋R：ブラウザでページの再度読み込み
command＋M：ウインドウを右下にしまう
command＋S：上書き保存
command＋Z：やり直し
command＋W：ウインドウを閉じる
command＋H：ウインドウを隠す
command＋shift＋4：スクリーンショット
まとめ
私が主力で使用しているのはこのくらいです！
使いながら覚える他ないですが、これだけでも随分楽になりますよ！
これからもどんどん覚えていこうと思います。作業効率をあげるとデザインにさける時間が増えますから♪
それでは、次のBLOGで！！
投稿 【初級】②文字入力がめちゃくちゃ楽になるショートカットキー は SOSOGoo DIY STAND に最初に表示されました。
]]>投稿 【初級】文字入力がめちゃくちゃ楽になるショートカットキー は SOSOGoo DIY STAND に最初に表示されました。
]]>こんにちは！tsuneです！
前回のBLOGでHTMLとCSSを本格的に学びはじめたよ！とご報告したと思います！
またその過程ですっごく便利なショートカットキーを発見してしまいました！
何故今まで使ってこなかったのか、、、、、、、、(^_^;)
この操作を知ってちょこっと使っただけで私的には文字入力の改革が起こりましたよ(笑)
それでは、いってみましょう！٩( ‘ω’ )و
文字入力 移動
以前の私は、←↑→↓キーやマウスを使用していました。(^_^;)
キーボードからいちいち手を離さないといけないので効率が悪くて悪くて、、、、、。
なので、上記のような方法でカーソルを合わせている方はそれを忘れましょう！
control＋F：カーソルを１つ右へ移動
control＋B：カーソルを１つ左へ移動
control＋P：カーソルを上に移動
control＋N：カーソルを下に移動
control＋A：カーソルを行頭に移動
control＋E：カーソルを行末に移動
文字入力 削除
control＋D：カーソルの右側の文字を削除
control＋H：カーソルの左側の文字を削除
control＋K：カーソルの右側文字から行末まで削除
option＋delete：カーソルの左側１文字とその後ろのスペース、句読点を削除
まとめ
今回は、このくらいでしょうか？？
またもや覚えるのが大変ですが、一文字ずつ移動・文頭文末に移動だけでも覚えておくとものすごく文字入力が楽になりますよ！
次のBLOGでは他のショートカットキーをご紹介しますね！
合わせて基本的なショートカットキーもあげておきたいと思います！
それでは！次のBLOGでお会いしましょう！(^ ^)
投稿 【初級】文字入力がめちゃくちゃ楽になるショートカットキー は SOSOGoo DIY STAND に最初に表示されました。
]]>投稿 【初心者向け】一緒に学ぼうHTML＆CSS① は SOSOGoo DIY STAND に最初に表示されました。
]]>こんにちは！tsuneです！
ちょっと前から、HTMLとCSSを本格的に勉強しております！
勉強前からWordpressで幅や色を変えたりとちょこちょこ編集はしていました(^_^;)
しかし、遂に本格的に勉強をする時期がきました！
その関係で、今から初める方と一緒に勉強できたらと思いまして記事にすることにしました。
本当に最初のことから備忘録の意味も込めてアップしていきますね！
それではまずは基本知識から！٩( ‘ω’ )و
HTMLとCSSって？
webページは「HTML」と「CSS」という言語の組み合わせで構築されています。
この２つの言語を学ぶだけでおしゃれなサイトを作ることも可能です！
HTMLとは？
HTMLは、ページの要素や構造を指定するための言語です。
HTMLの記法は、下のコードのように開始タグと終了タグで囲むような形になっています。
<開始タグ>〜</終了タグ>
開始タグと終了タグで囲ったものが「要素」と言われ、この要素が実際にサイト上に表示されます！
HTMLはこの要素の組み合わせによって構成します！
HTMLについて見出し
HTMLについて詳しく説明を読んでみよう！
↑このようにタイトルと文章を表示したい場合は、下記のように記述します。
<h1>HTMLについて見出し</h1> <p>HTMLについて詳しく説明を読んでみよう！</p>
CSSとは？
CSSはHTMLで作った要素を装飾するスタイルを指定する言語になります！
ページのデザインは基本的にCSSで記述できます。
CSSはデザインを指定したい要素を選択し、その中にどのような装飾をするのかを記述する形になります。
要素名 {
プロパティ名:値;
}
要素名
idやclassのことです。
HTMLで記述したどこにデザインを施したいのかを指定するためのものです。
プロパティ名
どのようなデザインをいじるのかということです。
幅や高さ、背景など色々ありますがどれをいじりますかー？ということですね！
値
プロパティ名の値をどのくらいにするかということですね！
例えば、文字の色を変えたい場合は、文字（プロパティ名）を指定して値に色情報を記述します。
すると文字が記述した色情報通りに表示されます！
実際に背景を淡いピンクに、文字を灰色にしてみましょう！
HTMLの記述はこのようになります。
<div> <h1>CSSについて見出し</h1> <p>CSSについて詳しく説明を読んでみよう！</p> </div>
それでは、CSSを指定していきましょう。
div{
background-color: #efd8d8;
}
h1{
color: #7d7979;
}
p {
color: #7d7979;
}
divは文字を囲っている全体の要素です。そのdivの背景(background-color)を色情報(#efd8d8)で色付けしています。
次にタイトル(h1)と文章(p)の色(color)を色情報(#7d7979)で色付けしています！
CSSについて見出し
CSSについて詳しく説明を読んでみよう！
まとめ
今回は、HTMLとCSSがどのようなものかをご紹介致しました！
この他にも沢山のルールがあります。覚えるのが大変ですよ！(^_^;)
しかし、これこそ書きながら覚えていくしかない感じですね。
私も今回ご紹介した知識に毛が生えた程度のスキルしかまだありませんのでこの記事をアップしながらどんどんレベルアップしていけるように頑張ります！！
投稿 【初心者向け】一緒に学ぼうHTML＆CSS① は SOSOGoo DIY STAND に最初に表示されました。
]]>