2018年11月15日木曜日

建築事務所のWEBリニューアルの仕事

【WEBデザイン・HPのリニューアル】

音楽教室のLP型ホームページを一緒に制作した株式会社ペルケオさんと今度は、
既存サイトのリニューアル、同時にもう一つ新規サイト立ち上げのためのWEBデザインをしました。

1つ目の建築事務所さんの既存サイトからのリニューアルは、

・WordPressに移行したい
・古いので情報を更新したい

というご依頼でした。

既存サイトのHTMLをのぞいたら、既存サイトがどこからかのテンプレートや写真を使っており、HTML上に建築会社さんと関係のない素材提供元のクレジットが入った状態でした。
リニューアルと言っても、それまでサイトで使っていた画像は使えず、新たに用意することになりました。


topページ・ファーストビュー
アトリエ禅さまHP

トップページのファーストビューは、
画像にするか、動画にするか、実際に案をHTML、CSSで作り見てもらいました。

昨今の傾向として、少しでも動いている方が自然になっているので、静止画もCSSで動きをつける案にしました。

選んでもらった結果、静止画+CSSになりました。
霧や煙のように動くCSSを使って幻想的なイメージになってます。
このCSS見つけた時、かっこいい!と思って提案に入れたので採用されて嬉しいです。

ファーストビューがタテに長くなりすぎると、13inchくらいのPCだと見えづらくなることがあるのでファーストビューのタテの長さに気をつけました。

大きいディスプレイや、もともと縦長のタブレットやモバイルなら問題ないのですが。


トップページ全体のデザイン


トップページを含め、計6ページのデザインをしました。
ペルケオさんがHTMLとCSS、WordPressの導入を行なってくれました。
その他にもデザインの提出など、クライアントさんと間に入ってやり取りをやってくださり、感謝です!!


今回は、既存ホームページのイメージを踏襲しつつ、新たなホームページを作る仕事でした。
色合い、雰囲気が先に決まっていたので、最初にご提案したデザインも特に大きな修正もなく進んでいくことができました。
ありがとうございました!!

アトリエ禅様HP(https://atelier-zen.co.jp/sekkei/)


2018年11月7日水曜日

ADC展2018

【展示見に行きました】 
ADC展「日本のアートディレクション展2018」に行ってきました。




会場がgggとG8でした。
トップクリエイターの作品を見て、刺激もらってデザインのインプットしてきました。
めちゃめちゃかっこよかったです!!


「行くぜ、東北。」でおなじみのフィリップ・ワイズベッカーさんのイラスト好きです。
最初これ見た時、かっこよすぎて衝撃で鼻血出そうでした。
何度見てもいいです。



イラストレーションの力を全体的に感じました。






あと個人的に気になる素材として「墨」。
墨を使ったロゴが素晴らしかった。




ロゴという概念を覆されました。
CI全体で考えられたマークとロゴタイプが勉強になりました。
ついWEBでSVGで表現しやすいものと考えてしまっていたなと反省しました。

良いデザインを見て、鳥肌がたくさん立ちました。

あと、デザイントレンドとしても「ダサかっこいい」キーワードが顔を出していた感じもありました。

ネオンカラー、マキシマムなテキストボックス、昭和、一昔前のコンピューターグラフィックス…

そんな波を感じました。

私もADC展のクリエイターに比べて小さい存在ですが、良いデザイン、人の心に残るクリエティブを提供していきたいと思います。

2018年11月1日木曜日

音楽教室のメルマガヘッダーデザイン

【メルマガヘッダーのデザイン】

ピアニスト・ピアノ教室講師の滝沢栄子さんより依頼をいただきました。
以前、ブログのヘッダーもご注文いただきました。

今回はメルマガのヘッダーです♪


メルマガヘッダーのデザイン

基本の配置などはPhotoshopで制作しましたが、Illustratorも使ってます。

素材などブログデザインで使用したものをIllustratorから持ってきて配置してます。
色はブログのピンクに合わせて設定しました。

最近のメルマガがHTMLで作られていることは知っていたのですが、どのような仕組みかよく知らなかったので調べました!

横幅はスマホで見る事を考慮して600pxくらいなんですね〜。
あと気になったのが、データの大きさです。

会社員時代、添付データの容量制限がある会社とメールのやり取りがありまして、こちらが添付したファイルが受信できないという問題がありました。
そんな経験から、メルマガ送信してもちゃんとヘッダーが受信できなかったらどうしよう〜??と思いました。

ネットで検索してみたら「添付データは3MBまで!」と書いてある記事もあり、あまりメルマガヘッダーにデータサイズをかけられないかなという結論になりました。

googleメールだと添付ファイルは25MBまで大丈夫です。

PNGで納品しても問題なさそうだったのでPNGにしたデータと、もしもそれでも受信できない人がいたら用に、もっと軽いGIFデータを納品しました。

栄子さんの音楽教室はどんどん進化して、栄子さんもピアニストとしてコンサートに出たりすごいバイタリティです!
2人のお子さんもいらっしゃって、かっこいいな〜と思ってます!

栄子さんの音楽教室のブログ


メルマガヘッダーデザイン、¥6,500(税抜)で承ってます。
お見積もり、ご相談はkakinoniwa.d@gmail.comまで!



2018年9月21日金曜日

レイアウト講座の講師やってきました。



コペンフラップ主催の「駆け出しデザイナー向け勉強会」のメイン講師をしました。
前回のプレ勉強会の記事 -2018年9月6日

コペンのもともとのコンテンツ「思わず見ちゃうレイアウト講座」のスライドを元にお話しをさせていただきました。

講座を参加されたみなさん、熱心に聞いてくださりありがたかったです。(ノД`。)ホロリ

最初に決まったテーマでチラシのラフを描いてもらい、話を聞いてから再度同じテーマでラフを描いてもらうという流れでの講座ですが、ラフが劇的に変わるのが面白いところ。

最後に発表してもらうので、自分以外のラフを見られるのも面白いと思います。


人前で話すということ


だいぶ講師業も経験させてもらってきてはいるのですが、まだまだだな〜と思います。

緊張はあまりしないのですが。
…というのは私は「人前で話すと思う」と緊張するけど、「打ち合わせと思う」と緊張しないので少し多い人数で打ち合わせしていると思い込んでやるからです。

慣れている経験の方を思い出して緊張をほぐして(?)ます。

ほんとウェディングフラワーの仕事した経験があって良かったです。
あの時の、毎週末何組もの初めましてのカップルとお話し・何度も打ち合わせ、という経験が人見知りの私を確実に変えました。

打ち合わせに行くまでは、どきどきなんですけどね。
失敗したこととか思い出して、不安で泣きそうになります(笑)
だから、あの時の失敗を二度と繰り返すまいと準備していきます。

今では挨拶して話す時には、もうスイッチ入れることができるようになりました。
打ち合わせスイッチです。

だから色々な事に「慣れ」って重要だなっと思ってます。

苦手と思っている事を繰り返しやってみよう。さすれば道はひらけん。
というのが私の座右の銘です。(今作った)
最高にマゾい作業ですが。

「慣れる」と苦手度が半分になって、だんだんと、なんとも思わなくなる気がします。

とは言え、
打ち合わせは聞きくこと、
講師は話すこと、
なので本質はちょっと違う気がするのです。

「喋る」のはよ慣れたいな〜。
すべらない話のDVDでも借りてくるかな。(←違う)


ちょっと余談。
うちの母は普段自分からグイグイ喋りにいくタイプではないのですが、 教師なので人前で喋るの超うまいです。

たぶん同じ属性なので、母を目標にがんばろうと思います。

2018年9月12日水曜日

音楽教室のWEBデザインを担当しました

【Webデザイン】

音楽教室のロゴデザインに続き、同じ音楽教室のWebデザインも制作しました。


はなまる音楽教室(Hanamaru.y)


もともとクライアント自身で作られたホームページがあり、そこから改めてデザインに起こしていくかたちでした。
スクロールして見る、LP(ランディングページ)型にしました。


ウェブデザインはイラレで制作、自分でイラストも


ワイヤーフレームを確認してもらい、デザインをイラレで起こします。
デザインを起こす過程で、写真以外にターゲットに合わせたイラストが欲しいなと思い、描きました。



鉛筆で描き、Photoshopで色付け


下絵を鉛筆で描きスキャンし、Photoshopで色付けし構成していきます。
動物も植物もバラバラに切り取り、色を塗ってます。
その方が後で修正しやすいです。
現に、実際のイラストではクマの向きが反転してます。
植物も動物の位置に合わせて配置してます。

動物たちが囲んで演奏を聞いている
イメージのイラストにしました。


イラストはトップ部分、その他にお問い合わせ部分とフッター部分に入っています。
先生の似顔絵も描いてます。

Webサイト全体のカラーはロゴに合わせて決めました。
LPでスクロールして長くなるのでトップにメニューを固定してスクロールしてもずっと付いてきます。



Webデザインの仕事はここまで


私がデザインを、
HTMLとCSS・WordPless化を株式会社ペルケオさんが担当してくださいました。
Webアプリケーション制作のエンジニアさんなのに、WordPressもいじれるのすごいなぁと思います!

もっとフレキシブルな数値指示をすれば良かったなと反省してます。
たぶん、デザイン起こすの大変だったと思います。
ペルケオさんありがとうございます!!



後日談


はなまる音楽教室様のホームページを「ブログで紹介してもいい」とご許可の連絡をくださった時に、「問い合わせがありました!」と報告をもらいました。

とても嬉しかったです!
実は、ペルケオさんとの打合せ時に、これまでもwebから問い合わせがあった実績を聞いていて「はなまる音楽教室様はもともとの引き寄せ力あるな〜」と思ってました。
そのさらなる手助けとして今回のデザインが作用してくれたと嬉しく思ってます。

教室が楽しく、生徒いっぱいになることを願ってます٩( ´◡` )( ´◡` )۶




2018年9月10日月曜日

音楽教室ロゴをデザインしました。

【ロゴデザイン】

ロゴとWebサイトのデザインのご依頼をいただきました。

今回の依頼は直接ではなく、株式会社ペルケオさんが間に入ってやり取りをしてくださいました。その節はありがとうございました!!

ホームページを作るにあたり、ロゴも作りたいというご要望がありました。
先にロゴを決めてからということで、ご提案を4案作り、そこからお客様の意見を伺いいくつかの修正を加えて決めて行きました。

クライアントの「はなまる音楽教室(Hanamaru.y)」さまは、ピアノとエレクトーンの音楽教室です。

まずは手で描く


手でスケッチして案を固めて行きます。
私はA4のコピー用紙にランダムに描いて派生させていく感じです。
見た目は落書きですが、ちゃんと考えてます。

実際のスケッチ

4案を提案するので、複数パターン何かしら出てくるまで、スケッチタイムです。
シンプル、かわいい、かっこいい、ダジャレなどイメージして考えていくと出てくる気がします。




「これでロゴに起こしてみよう」と複数決めたらPC上に方眼を作り、形を決めていきます。
実際の方眼用紙に手書きすることもあります。


出来上がったら提案書づくり


自分の経歴で企画会社にいたという事が、かなり影響しており提案書は文字多めです。
パワポで作ります。

制作者の意図を伝えるために、以下のことを必ず書いてます。

  • そのロゴを一言で何と言えるか
  • コンセプト文章
  • 展開例
  • カラー案

とにかく文字で伝えるようにしてます。
提案書はラブレターと思って書いてます((o・д・)b

実際の提案書

女性の方がクライアントだったので少し枠に装飾を入れました。
展開例は、実際使われている様子を例としてつくる時もあります。
そういう時は1つのロゴに2、3ページ使います。


ロゴの決定


お客様の「もっとこうしたい」といういくつか修正を加えて、ロゴを決めていきます。
今回は「音符」と「はなまる」と「HとY」を融合させたロゴに決定しました^^
ロゴのみのご依頼の時は、ai、jpg、pngデータをお渡しして完了です。








終わりに



せっかくなので、私がロゴをどうやって作っているかを書いてみました。
色々なやり方、見せ方があると思います。
提案書はもっとスペース取って、ゆったりと見せた方がデザイン的にかっこいいのですが、1枚にまとめたい気持ちの方が強くてぎゅっとなってます。
どんな企画会社にいたかお察し…(^^;)ですね。

ロゴの次は、WEB制作です。
次の記事に書きたいと思います。
webアプリケーション制作の株式会社ペルケオさんとがんばりました♪


2018年9月6日木曜日

【コペンフラップ主催】デザインの勉強会

【コペンフラップ勉強会(一般公開前のプレ勉強会)】


コペンフラップは、デザインの仕事受注をクラウドで行なう会社です。
私が講師登録しているのはコペンカレッジなんですが、

昨年の夏に
仕事受注部門デザインスクール
別々に切り離して、

デザインスクールとして一般社団法人コペンカレッジに、
デザインの仕事受注管理を行なう株式会社コペンフラップになりました。


別になったとはいえ、両方とも運営は同じメンバーで、講師陣も一体となってフラップでデザインの仕事をしてます。

先日、コペンフラップ主催で勉強会がありました。




運営でもありアートディレクターでもある、ゆっちーさんが実際の仕事などを見せてくれる機会を設けてくれました。

仕事を始めたばっかりの初心者デザイナー向け勉強会とのことでしたが、3年目の私も改めて知っていることの確認になりました。

私はデザイン事務所出身ではないので、「デザイン界の暗黙の了解がわからない」のが独立したての頃の悩みでした。

「常識でしょ?」と言われていることは、なかなかネットにも載ってません。
気がつかず失敗していた…ということがありました。


例えば、
  • イラレにリンク配置でjpgは使わない。psdやepsに変換したものを使うとか(^^;)
  • RGBをCMYKに変更するとか(^^;)
  • トンボはアートボードの中央に配置するとか(^^;)

今改めて書くと、恥ずかしい…。
印刷会社さんのホームページにも注意事項として載っていますが、当時は疑問すらなかったですから、調べない→あれ印刷がおかしい?ということもありました。


そんな状態から抜け出すためにやったことは、
  • デザイン事務所出身の経験のある方に教えてもらった
  • DTPの勉強会に参加した
  • TwitterでDTPの仕事している人をフォローした
です。

さらに講師として、
  • BMW(Brides Made Wedding)の添削を担当させてもらった
  • WEB制作会社の研修の講師をさせてもらった
が大変良い経験になりました。

だんだんと「なぜ、こうした方がいいのか」も説明できるようになりました。


来年2019年1月でフリーになって丸3年。

幸運なことに色々な方にお声かけいただき、けっこうガンガン経験積ませてもらったと思います。
請求書ナンバーも60件を突破しました!(∩˃o˂∩)わーい(9月現在)

今はPHPとWordPress、WEB関連の勉強を強化中です!!


さて、
コペンフラップの勉強会ですが、まだプレ段階とのことですが定期的に開催予定です。
次回は9月20日(木)。
この回は私も講師として「レイアウト」についてお話する予定です。

がんばります。


2018年8月29日水曜日

イラストでイメージしやすく!音楽チラシデザイン。

【チラシデザイン】




まずは背景のイメージカラー


10月6日の「シャンソン&マリンバコンサート」のチラシをデザインしました。
コンサート会場のフェチーチェピアノサロンスタジオ様からの依頼です。

イメージカラーは初秋です。
葉がグリーンからオレンジに変わる色あいにしました。

背景は、ipadで描いたテクスチャーを使ってます。芸術の秋っぽく。


ipadで描いた一部分


実際の葉の写真をPhotoshopで重ねて、色調を変えてます。


Photoshopで作った背景一部分



デザインの「魅せ要素」に困った


何度かコンサートのチラシをデザインしていてけっこう困るのが、特にテーマがないコンサートです。

クリスマスとか大きな季節イベントがあればいいのですが、10月…って?

10月は、中秋の名月かハロウィンがありますけれど、このコンサートは特に曲目もそういったイベントを意識したような曲もなく…。

キャッチーなテーマがないとデザインも作りづらいです。
とは言え、デザイナーですから必ず何か「価値」を見つけ出します。

秋で紅葉??葉っぱいっぱい??
シャンソンでノスタルジー??

うーんと悩んだ結論、今回は、やはりシャンソンとマリンバとピアノのコラボレーションかな〜と。

しかし案の定写真が…証明写真のようなプロフィール画像しかなかったので、コンサートをイメージできるイラストをいれることにしました。

楽しそうに演奏している画像があれば最高なんですけどね〜。


イラストを「魅せ素材」に


iPadでイラストを描きました。
最初からパスになっているので、拡大も色変えも自由です。便利!




どんなコンサートかわかるように演奏している人を描きました。
顔の部分はプロフィール写真からイラストを起こしたので、
軽く本人のイメージイラストですね。

イラストをメインにしたので、楽しげなイベントっぽくなったかな〜。



コンサート情報

  • 日時:2018年10月6日(土)14時開演
  • 場所:埼玉県川口市芝2−3−11 フェリーチェピアノサロンスタジオ
  • 料金:2,500円

2018年8月9日木曜日

11月コンサートのチラシデザイン

【チラシデザイン】
11月30日のコンサートのチラシをデザインしました。




イメージカラー


秋のコンサートなので、オレンジ色をメインにしました。
オレンジ色って元気良すぎちゃって上品にするのが難しいかなと思ったのですが、エルメスオレンジを思い出して「上品オレンジやってみたい」と頑張ってみました。


背景にこだわりました


使った絵画はウォルター・クラインの「四季の仮面」です。
作家死後100年経っており、著作権が切れているので使いました。
春夏秋冬が擬人化された絵です。

Photoshopを使い背景を作りました。
絵画を4つにわけ、今回のコンサートの「秋」の人を大きくしました。
冬が右下なのですが、ちょっと怖い感じ。



背景画像


背景画像のさらに背景の花の部分


実際の花の写真を加工して、絵画の背景にしてあります。
11月に綺麗なダリアとバラです。
なるべく絵画と馴染みが良いように、切り抜きをわざと汚くしたりしてます。

イラレでレイアウト


文字をIllustratorで入れていき、絵画の顔だったり、花の顔だったり、変な風に覆わないように気をつけて配置していきました。

表題の「ソプラノ・バリトン&ピアノの夕べ」の文字に少し飾りをつけ、「AutumnConcert」と英字を入れました。
安易に英字を入れるのはあまり好きではないのですが、今回はフォントが気に入いりまして、なんというか挿絵的に?入れてます。

終わりに


ソプラノの平田さんからデザインを褒めていただきました。
嬉しいです!!


今回のコンサート、実は私も影マイクで当日協力することになってます。
朗読をやるみたいなのですが…どきどきしますー!




2018年11月30日(金)
18時半開演(18時開場)
場所:フェリーチェピアノサロンスタジオ
料金:2,500円
申込先:info@felicepss.com


2018年8月1日水曜日

Adobeモバイル用アプリのデータはどこにいった?





Adobeのモバイルアプリは便利。だが…
Adobeのモバイルアプリは優秀で、IllustratorやPhotoshopの一部機能が無料で使えます。

とくに私は、iPhoneで背景のいらないものを消したりできるPhotoshop Fixが重宝しています。

PCを開かなくても編集できてラク!

昨年買ったiPadには、DrowSketchを入れました。
iPadはPCの補助として使うつもりで買いました。

Drowは自分の描いたものがライブトレースしなくても、パスになっているという素晴らしいアプリ。


「これで自分のイラストを即デジタル化できる!と」思っていたのですが、
いざPCに送信してみたら、描いたもの(aiデータ)が
どこに格納されているのかわからない、という事態が発生しました。

公式サイトには、
モバイルアプリで送る→PCですぐ編集できるとあります。

確かにイラレを立ち上げるとすぐにアプリのデータが立ち上がります。

だけど
「とりあえず送って後で編集しよう〜 ^^」と思う時もあるわけです。

このようにタイムラグがあるとイラレ立ち上げ時にアプリデータが立ち上がらないことがあり、またiPadで送信するという二度手間になることがありました。


AdobeCreativeCloudフォルダにないし…
昨日送ったデータは…PCのどこに入った?と探し、ついにライブラリフォルダの奥深くで発見しました。


Adobeモバイルアプリデータの場所

まずはDrowで保存が確かにされているか確認




Drowの右上アイコンから「アドビディスクトップアプリケーション」を選択





Illutratorを選択。「送信されました」と出たらOK。




さてPCのどこに行ったか。

この中です

Macintosh HD
→ユーザ
→ユーザ名
→ライブラリ(薄い文字になっている)
→Application support
→Adobe
→OOBE
PushToDesktop

または

Finder
→上のバー「移動」
→optionを押すと現れるライブラリをクリック
→Application support
→Adobe
→OOBE
PushToDesktop


このPushToDesktopフォルダの中にDrowのaiデータがありました!

不可視フォルダなので、Finderでフォルダ検索しても出てきません。

このライブラリフォルダ、特定のアプリケーションのキャッシュを消す時にアクセスする人が多いようです。

もう〜どこにいっちゃったかと思ったよ〜〜。

私的には、データがすぐに立ち上がらなくてもいいから
CreativeCloudフォルダに保存されるとか
わかりやすい形でaiデータを受け取りたいです^^;

でも謎が一つ解けたのでスッキリ。

2018年7月23日月曜日

プログラミング初心者勉強中

Progateのマイページ


プログラミングの勉強はじめましたというブログ記事を書いてから、2週間ほどが経ちました。
あれからProgateに有料登録して、少しずつPHPに挑んでます。

大きなノートを用意した


初めて見る単語の数々…
私は復習の際ノートにまとめたりして、理解していってます。

はじめ、普通サイズのB5ノート(方眼)にコードや理解するための絵とか描いていたのですが、コードが長くなったり、一行で見たい時に不便でした。
HTMLとCSSの勉強の時は十分だったのですが。

もっと大きいのに書こうと見つけたのが、B4サイズの無印のらくがき帳。
すごく使いやすいです。
大きいし、無地なので自由に書けます。




プログラミングに出てくる言葉「関数」を調べたら、
もともとfunctionの音訳だったという事がわかり、
「無理して日本語の意味を理解しなくてもいいんだ」という事がわかりました。


オブジェクト指向でつまづいた



プログラミングの考え方って独特ですよね(´・ω・`)


「オブジェクト指向」という言葉が出てきた時、「オブジェクトって何を指しているの?指向ってどういう意味?」と頭の中ハテナでいっぱいでした。

説明文を読んでも全く理解できない…。

これはつまずくポイントかもと思い、ここで踏みとどまるんだー!と頑張って色々調べて見ました。


だんだん見えてきたのが、
これまでの手続き型と呼ばれるプログラミングからの脱却を目指して作られたのがオブジェクト指向だそうです。


例えば、ネットショッピングサイトのプログラミングを書く際、
1つの商品に「商品を選ぶ→計算する→決済する」といったプログラミングをそれぞれの商品ごとに書くとしたら膨大な量になります。
これが従来の手続き型と呼ばれるものです。


商品や値段はそれぞれ値が違えど、配置するのは商品の写真(img)、その下には値段(数字)と決まっています。
それならば、一括で設定できた方がプログラミングの量も少なくすむし、修正もラクな上、スペルミスも最小に抑えられます。
それがオブジェクト指向です。

ふむふむ
内容はわかったけど、で、オブジェクト?指向?ってなんでその言葉なの。




オブジェクト指向は、英語でobject-oriented programming
直訳は「目的重視のプログラミング」。
英語にオブジェクトって単語が使われてるのかとわかり。

お?英語の方が何となくつかめるかも?


「共通のモノ事、動きを分類して、
どう目的を処理するか命令するテンプレートを作ること」

これが私の「オブジェクト指向」とは?の答え。
そして日本語訳の意味は「よくわからない」のも答え。

日本語ムズカシイデス。