簡単! ゆるゆるイラストチュートリアル②[PhotoShop着色編]


お久しぶりです!第34回ブログ更新担当のはらです!
今回は前回の記事「簡単! ゆるゆるイラストチュートリアル①[Illustrator線画編]」の後編「簡単! ゆるゆるイラストチュートリアル②[PhotoShop着色編]」をご紹介したいと思います。
本日も前回同様この方にお越しいただきました。イラスト大好き「イラストちゃん」さんです!

お…お久しぶりです。今日はテンション高めですね。何か良い事でもあったのですか?

がんばってくださいね。

と、言う事でPhotoShopでの着色方法の紹介をお願いします。


1. 前回作成した線画ドキュメントをPhotoShopで開きます
PhotoShop上部メニューバーより「ファイル」→「開く」を選択。
[Illusutlator編]で制作したAIデータを選択し「開く」をクリック。

2. 「PDFの読み込み」ダイアログボックスで下記情報を入力し「OK」をクリック(サイズは用途に合わせて変更してください)

画像が開きました

3. レイヤーパネル下部の「塗りつぶしまたは調整レイヤーを新規作成」アイコン→「ベタ塗り」を選択→色をffffff(白)に変更

4. 制作した「べた塗り 1」レイヤーをレイヤー1の下に移動

5. レイヤーパネルでべた塗り1レイヤーを選択した状態で「新規レイヤーを作成」アイコンをクリックしてレイヤー2を作成→レイヤー2を選択した状態でレイヤーの描画モードを「乗算」に変更

6. ツールパネルから「ブラシ」を選択。カラーパネルの描画色を設定をダブルクリック→カラーピッカーに数値(b4eaff)を入力し「OK」をクリック(色は何色でも構いません)

7. 「ウィンドウ」→「ブラシ」でブラシパネルを表示「ブラシパネル」内で「楕円(ソフト)11」を選択し数値を入力

8. Illustrator上部コントロールパネル内の「不透明度」を40%に変更

9. レイヤーパネルの「レイヤー2」を選択した状態で色を塗ります。(今回は行いませんがパーツごとにレイヤーを分けると修正が楽になります)

10. イラスト全体の塗りが終わったら、次は線の色を変更していきます。レイヤー1(線画レイヤー)をダブルクリック

11. レイヤースタイルダイアログで「カラーオーバーレイ」にチェック→描画モードを「スクリーン」に変更。その後、好きな色を選択(今回は#7d7a7fに変更)「OK」をクリック。

12. 完成

ポスター怪しいですね…

思い返してみるとWEBや紙媒体などには大抵イラストや写真が入っていますね。これだけ使われているということは、今後もイラストが必要な機会は沢山ありそうです…。そんな時に今回知ったイラスト制作方法を“読んでもらえる資料”や“引きの強い広告”制作に役立てていきたいと思います!

こちらこそありがとうございました。早速会社のブログ制作に使ってみますね!
ということで皆さんも機会があれば描いて見てくださいね!そでれはまた次回の更新でお会いしましょう。


今回ご紹介した作画方法で制作したイラスト(細かい設定は少し変えていますが…)が、求人情報サイト「ジョイジョブ」twitterアカウントで使用されています。
興味のある方は「ジョイジョブ」twitterアカウントhttps://twitter.com/joyjob_jpを覗いてみてください。


 

Pocket

たのしい文字組み 字間を調整してみよう

こんにちは。デザイン業務に関わっております、コンドウです。

みなさんお花見はしましたか?会社の近くの桜はもうほとんど葉桜になってしまいました。
桜が満開になってくると、大抵大雨が降ってすぐ散ってしまうので、毎年気が気ではありません…

さて、今回のテーマは「文字組み」についてです!
前回は文字組みの「字間と行間」について基礎的な部分のお話をしましたが、そのレベルアップ版で「字間」についてもう少し掘り下げていきたいと思います。

これから新入社員やデザイナーになる方に向けて、字間の調整方法や、漢字や記号などそれぞれの特徴に合わせた字間の空け方を書いていきます。
文字組みに気を配ることで、読んでもらう人にスムーズに内容を理解してもらうことが出来ます。デザイン作りはもちろん、日頃のプレゼン資料作りにも役立ちますので是非ご一読ください!


“字間を調整する”とは?

字間とは、文字通り「字と字の間」を指す言葉です。
字間の調整方法には、「字送り(トラッキング)」「カーニング」「文字ツメ」があります。


トラッキング(字送り)

テキスト全体の文字間隔を一定に整えるのに適しています。テキスト全体の中から一部を選択して任意の部分だけ間隔を調整する、と言う使い方も出来ます。
トラッキングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。

カーニング

2文字(文字とそれに隣接する文字)の間隔を調整するのに適しています。調整方法として、自分で数値を選択・入力して整えることが出来る他、Adobeソフトなどでは自動で文字組みを調整してくれる機能「和文等幅」「オプティカル」「メトクリス」があります。
カーニングの設定の値をプラスにすると間隔が広がり、マイナスにすると間隔が縮まります。

文字ツメ

そのままですが、文字を詰めるのに適しています。0%から100%の値を選択して文字と文字の間を詰めます。設定の値が100%に近づくと、組み合わせによっては隣り合う文字がくっついてしまいますので注意が必要です。
文字詰めの設定の値をプラスにすると間隔が縮まります。


そもそも字間を調整したい時はどこで編集すればいいの?と言う方は下記を参考にしてみて下さい。
よく使用される代表的なソフト2つ、「Adobe Photoshop」と「Microsoft PowerPoint」の字間の設定画面です。


文字の特徴に合わせて字間を調整しよう!

文字には、漢字、ひらがな、カタカナ、英語、記号など様々な種類があります。更に同じひらがなの括りの中でも、丸っこい字、四角い字、細い字など形も様々です。
種類や形の組み合わせによって、字間が広かったり狭かったりと変わることがあります。
まずは全体の字間はどれくらい広げようかな?と目的を定めます。「ゆったり読めるようにしたいから広げよう」「既定のサイズに収めたいから縮めないと」など、ざっくりでいいのでいいので決めます。

それでは早速、下記の例文のバランスを見てみて下さい。また、この例文を調整する目的は「デフォルトの設定を元に、バランスを均一になるように調整する事」です。

デフォルトの設定で文字を打ち込んだままだとこのようになります。
まず「、」と「家」の間が開きすぎているなと思った方も多いのではないでしょうか。
、。「」などの記号は、デフォルトの設定だと字間が広いくなってしまいますので、調整が必要な事が多い部分です。
特にタイトルや短い文章で記号を使う際は、記号の前後の間隔が広いと不格好さが目立ってしまいます。その為、全体のバランスを見ながら調整してあげましょう。

では、実際に字間を調整してみます。
今回は「、と家の字間が広すぎる」ので、カーニングで調整します。

そもそもテキスト全体のバランスをまず変えたい…と言う方は、カーニングを弄る前に、トラッキング設定を行いましょう。全体を整えてから、細かい微調整を行うイメージです。
例えばもう少しテキスト全体の字間にゆとりを持たせたいと言う方は、トラッキングの値をプラスすることで選択した全ての文字の間隔を広げることができます。

話を戻しまして、今回使用している「小塚ゴシック Pr6N 36px」のカーニング設定を変更して文字を詰めたいと思います。

「、」と「家」の間のカーニングの値を、0pxから-400pxにしました。ここだけ飛び抜けて字間が広かったのが、周りと均衡が取れるようになりました。
私はカーニングをよく使うのですが、詰めるだけなら文字ツメの値を変更するやり方でも大丈夫です。むしろ文字ツメの方が早くて使いやすい!と言う方もいるかもしれないので、自分の使いやすい方で調整してみて下さい。

次に「W」と「は」、英文と和文の字間です。細かい部分ではありますがここも若干広くなっていますので、カーニングで調整を行います。「W」と「は」の間のカーニングの値を、0pxから-150pxにしました。

余談として応用編にはなってしまいますが、どうしても綺麗に組めない、納得いかない時は、フォントから調整する必要があります。英文には欧文フォントを使用した方が綺麗に組むことが出来ます。また、和文がゴシック体なら英文にはサンセリフ体を使用する、線の太さや雰囲気が似ている物と組み合わせるなど、フォントから気を配ることが望ましいです。
例えば「HGSゴシックE」は、デフォルト設定では下記の図のように英文が半角で表示されてしまいます。比率が縦長の文字と正方形の文字が並んでいてバランスが悪く、見る時に違和感を感じてしまいますね…
そんな時こそ欧文フォントに変えてみて下さい。和文で使用しているゴシック体に合うように、欧文フォントはサンセリフ体の「Myriad Pro(フォントの太さ:Semibold)」を使用します。

文字のバランスが統一されて、自然で読みやすい文字の並びになったのではないでしょうか。
もちろん、和文フォントをそのまま使用する事も間違いではありませんよ!あくまで見易さの観点からバランスを考える時、こだわりのデザインを表現したい時に考慮してみて下さい。

また和文フォントと欧文フォントを組み合わせる際の注意点ですが、同じフォントサイズでも欧文フォントの方が小さく見えることがあります。
その為、欧文フォントは少し大きめに設定してあげると綺麗に見えます。今回は「GW」の部分だけ、「小塚ゴシック Pr6N 36px」から「小塚ゴシック Pr6N 38px」にちょっと大きくします。

微妙な変化ではありますが、バランスが良くなったのではないでしょうか。特に英文と漢字の大きさを比べるとバランスが改善されたのがわかるかと思います。

他にも字間の特徴は様々で、デフォルトだと漢字は少し詰まり気味、ひらがなは開き気味などもあります。隙間のバランスをどこに合わせるのかを決めて、広げたり縮めたりしてみましょう。
上記を踏まえて、最後に例文の微調整をしてみたいと思います。

これで目的達成です!
まったく字間を調整しなかった場合より、調整してあげた方が全体のバランスが統一されて見やすくなったのではないでしょうか。
ちなみに字間の調整を行った箇所は全部で6ヵ所になります。

もしここまで来て「やっぱり全体の字間を広げたい…」「縮めたい…」と思ったら、トラッキングの値を変えてイメージに近づけて下さいね。


おわりに

いかがでしたでしょうか?
バランスは文字や文章によって様々ですし、美的感覚も人それぞれなので具体的な数字で正解を出すことが難しくもあります。だからこそ、まずはやってみることが大切でもあります。
A4の紙の中で組むのか、幅640pxのバナーで組むのかなど、様々な条件や目的に応じてやってみることで、適切なバランスに作っていくことが出来ます。
興味を持って頂けた方は、今回の例文などを参考にぜひ試してみてください!


↓↓前回のおさらいがしたいなという方は、ぜひこちらもご覧ください!↓↓

たのしい文字組み―字間と行間―


それではまた!デジマースのコンドウでした。

Pocket

初心者OK ファイルサイズを小さくしたい!~PNG・GIF・JPEG編~

さてさて作成したデータが完成した後にあまりにも容量が大きすぎて困ったことはないですか?
ex.メールで送れない…、ファイル数多い上にデータ重いとか…

私は困りますね!(キッパリ)
というのは、もちろん受け取る側でも、送る側でも、個人で保存に至っても出来る限り容量は軽い方が良いですよね。
通信時間かかるし…、メモリー食うし…

まぁ…作成する内容によってはどうしても容量を下げられない時もありますがそれはそれとて、今回は、そういうものを除いた、「PNG・GIF・JPEG」ファイルの容量をパソコンで下げる方法を書きたいと思います。

※※完全に個人の主観が入っております故ご了承くださいませ※※

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼ラインナップ

・PNGファイルの場合
・GIFファイルの場合
・JPEGファイルの場合
※動作Windows/Photoshop CC/Fireworks CS6
※それ以前のソフトでは見え方が違う場合もあるかもしれませんが、流れとしては変わりません。

▼PNG形式ファイルの場合

WEB用にバナーの画像を作成しました。

プロパティなどで容量を確認してみると、「83.5KB」ありました。
まずはファイルサイズがこれ以上小さくできるか簡単に確認してみましょう。

①確認したい画像を開き、下記のファイルから項目を選びます。

②PhotoshopもFireworksも「PNG24またはPNG32」になっていたら「PNG8」を選択して保存!
PNG8にすることで色数は減りますが、グラデーションを沢山使用している等の余程の事が無い限り見た目は変わらないと思います。

容量削減完了。


▼GIF形式ファイルの場合

WEB用にアイコンの画像を作成しました。

プロパティなどで容量を確認してみると、「14.1KB」ありました。
減色を行い、容量を軽くしてみましょう。


①確認したい画像を開き、下記のファイルから項目を選びます。

容量削減完了。

▼JPEG形式ファイルの場合

使用したい写真を用意しました。
容量が大きいが、サイズは変えずにイメージが変わらない程度に容量を下げたい。

プロパティなどで容量を確認してみると、「2MB」ありました。
減色を行い、容量を軽くしてみましょう。

①減色したい画像を開き、下記のファイルから項目を選びます。

②割愛してますが、プレビューも出ていると思いますので、変化を見ながら減色することをお勧めします。

容量削減完了。

▼最後に

簡単に容量を下げられる簡単なやり方をご紹介させて頂きました。
まだまだカラーロックしたりと様々な方法がありますが、今回は初心者OKな内容ですので割愛しています。
知ってるよ!な内容かもしれませんが;少しでも参考になれば幸いです。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、またお会いしましょう!以上スガがお送りいたしました!

Pocket

[必然的な利用シーン]環境/需要との接触

あなたが関わっているサービスの、UX設計上の「利用シーン」はどんな状況でしょう。

「テレビで聴いた楽曲を購入したくなったとき」など唐突にサービスを使用している場面が多いと思われますが、
初めてサービスに接触する「その時」の環境と需要を意識出来ていることが重要です。

と、さすがにこんな具体性なく都合よくあなたの関わるサービスを見つけ使ってくれる状況は、そこまでに至る過程を省きすぎだと理解いただけるとは思います。

「何に困っているのか」「何を欲しているのか」「どう接触してきたのか」
という利用者の抱える問題を踏まえた「必然的な利用シーン」がある上でサービスのUX設計をしていく必要があります。

今回は、
「ペルソナ設定/行動シナリオ」の設計フェイズでも方向性がぶれないように
開発起案段階での「環境」「需要」などの「接触要素」と過程の理解を考えてみます。


環境ありきの「接触」

サービスと利用者が「接触」できる環境(状況)を正しく認識するために「ターゲット」を知る必要があります。

近年、マス(大衆/集団)だけでセグメントをすることは適切でなくなり、
「何」に関心があり何に関心が無いのか、
また、どういった移動手段をつかうのか、どういった趣向をもっているのかという、「心理的変数」「行動変数」など動向別にセグメントすることが有効になってきました。

「心理的変数」
・価値観、ライフスタイル、性格、好み、将来の希望

「行動変数」
・利用方法/手段、購買意欲、購買履歴、商品への忠誠/親密度(ロイヤルティー)

上記のワードを常に意識してサービス起案の方向性を決めていれば、
提供者視点を避けられそうです。

つまり、
人々の考え方を神のように常に把握していれば「究極マーケッター」に成れそうですが、現実は難しいので仮説の元、細々と都度データで確証を得てターゲットの行動を理解していくしかないようです。
地味な作業がやっぱり大事なんですね。

ターゲットの行動が見えてくると、どのような環境下でサービスとの「接触」が行われるかが見えてきますので、
初めてサービスに接触するその時の「利用シーン」の具体的な過程がわかってくるのではないでしょうか。

下記は、
状況によって「起こり得る/起こり得ない接触」「環境」の例です↓


「隠れた需要」との接触

「需要」を考える場合、ユーザーから直接聞くことが適切と思われますが、
その「聞き出した需要」はそのままでは必ずしも適切ではない場合が多いようです。

私たちが世の需要を掴みにくい状況は、「利用者側が発する声」にも表れ、
本人も本質が見えていないため、例えば、必要だと思って買った商品が結局使われないまま埃をかぶることは良くあることです。

その時の状況を思い返すと、
単純にタイムセールの商品で限定感で買ってしまったり、
モデルやタレントへの憧れから同じ洋服を買ってしまっていたり、
忠誠心/信仰心から、同じ系統(系譜)の商品を惰性で買っていたりと、
つまり「間接的な要因による需要」があることを認めざるを得ないわけです。
よって、「利用者の声」には「本当の需要」が隠されています。
一度寝かせて落ち着いたタイミングで、広い視点で分析、有効活用していきましょう。

必然的な利用シーン

以上を踏まえて、改めて冒頭の利用シーンを考えてみると、下記のような行動をする利用者も設定できるのではないでしょうか(あくまで手段の一つ)。

上記は今回の説明のために極端にセグメントをして必然性を上げているので母数は限られますが、
具合的な接触ポイントの必要性を理解いただけるのではないでしょうか。

次回も、サービスUX設計の話題をしたいと思います。
以上、サービスデザインに関わっているデジマースのネモトでした。

/////////// 関連記事はこちら↓ ///////////

UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

簡単! ゆるゆるイラストチュートリアル①[Illustrator線画編]

こんにちは!第30回ブログ更新担当のはらです!
今回はデザイン業務や資料制作の際に「フリー素材で欲しい素材が見つからなかった…」「オリジナリティを重視した素材が欲しい!」という場合に使える簡単イラスト制作方法をご紹介いたします。イラストのテーマは「ゆるめ」です。
また、今回はスペシャルゲストと一緒に紹介していきます。
※IllustratorCC 2017を使用しています。

それでは早速ですが、本日のゲスト…「イラストちゃん」さんです!パチパチ

………………はいっ。 よろしくお願いします。
イラストちゃんにイラストを紹介してもらう前に、簡単にイラストについて質問をしてもよろしいでしょうか?

印刷物やWEB、資料などに入れるイラストにはどのような効果がありますか?

もっとわかりやすくお願いします。

なるほど、普段何気なく見ているイラストにはそんな効果があったのですね。
イラスト制作の技術があればデザイン業務や資料制作に役立ちそうです!ますます制作方法を知りたくなりました。
それでは紹介をお願いします。

1. 新規ドキュメントの作成
Illustrator上部メニューバーより「ファイル」→「新規」を選択。画像を参考に数値入力(ドキュメントサイズやカラーモードは使用用途に合わせて変更を行ってください。)

2. ブラシの設定を行います
Illustrator上部メニューバーより「ウィンドウ」→「ブラシライブラリ」→「アート」→「アート_カリグラフィ」を選択

3. カリグラフィパネルが開くので「5pt楕円」を選択

4. ツールから「ブラシツール」を選択

5. 作画
(作画中、少し気に入らない部分があっても気にせず進めてください、修正は描画後まとめて行います)

6. ツールから「ダイレクト選択ツール」を選択。

7. ダイレクト選択ツールでパスを修正し、線画完成
(線幅が気にいらない場合は上部メニューバーより「ウィンドウ」→「線」を選択し、線パネルから線幅を調節してください)

あ…二回に分けるんですね。

わかりました!お忙しい中ありがとうございました。
と言う事でまた次回、簡単! ゆるゆるイラストチュートリアル②[Photoshop着色編]でお会いしましょう!

Pocket

たのしい文字組み ―字間と行間―

こんにちは。デザイン業務に関わっております、コンドウです。

卒業シーズンですね!帰宅中に袴姿の若い女の子を見かけると、フレッシュだなぁとしみじみしてしまいます。
学生を卒業したよ~と言う方は、4月からの新生活に備えて春休みを思いっきり楽しんで下さいね!

さて、今回のテーマですが「文字組み」についてです!

これから新入社員やデザイナーになる方は、パワポで資料をまとめたり、文字を使った制作物を作る機会は必ずあると思います。
大切な資料やお仕事なので、読みやすくて綺麗な物を作りたいですよね?そんな時に役立つ、綺麗で読みやすい文字組みについてまとめてみました。

ちょっと気をつけるだけで簡単に出来る基礎的な内容になっていますので、文字が読みづらいな…と悩んでしまった時の参考にしてみてください。


文字を「組む」とは?

「組む」とは、簡単に言うと文字を並べることです。「組版」と言ったりもします。
雑誌や新聞の文章だったり、お菓子などのパッケージに書かれた文字、スマホやPCのディスプレイで表示されているテキストの並びも、文字を組んで出来上がっています。

なぜ「組む」と表現するのかと言うと、諸説ありますが…

Wikipediaによると「本来は活版印刷の用語で、文字通り版を物理的に組むこと、活字を並べて結束糸で縛ったものを「組み版」と呼んだことに由来する。」だそうです。

昔からの手法である、活字の書かれた判子をルールに沿って組み合わせて印字する様子を元に、そう呼ぶようになったのだと思います。


見やすい文字組みの基礎 ―字間と行間―

文字組みの基礎に「字間(じかん)」と「行間(ぎょうかん)」があります。
文字通り「字と字の間」「行と行の間」を指す言葉です。

この“ 間 ”が大事で、ここがちょっと違うだけで文章の読みやすさが変わってしまいます。

まずは「字間」について見てみましょう!例えば下記の文章を読んでみてください。

ちょっと読みにくいですね。ここで、字間を開けてみましょう。

さっきより読みやすくなったのではないでしょうか?
少し変えてあげるだけでも、文字の読みやすさはこんなに変わってきます。

では、字間の幅はどのくらい開けたら良いの?と言う疑問が出てくるかと思います。
これは、フォントや文字の大きさ、テキスト領域によって状況が異なりますので、厳密にこれだけ開ければ正解!と言うのはありません…。状況に合わせて、自分の目で確かめながら調整する必要があります。
ちょっと応用編になってしまうため今回は割愛させて頂きますが、もっと細かい話になると「漢字」「ひらがな」「英語」「。」「、」など、文字1つ1つの特徴や組み合わせによって細かく字間を調節したりもします。

次は「行間」についてです。下記の文章を読んでみてください。

とても読みにくいですね…。文章の内容が頭に入ってきにくいのではないでしょうか。
文字や行が多ければ多いほど読むのは苦痛になってしまいます。大切なプレゼン資料やデザインのテキスト構成がこんな状態では、伝わる物も伝わらない!なんてことも…

そんな時は行間を開けてみましょう。

印象がだいぶ変わりましたよね。
一般的に、行間は文字サイズの50%~70%が良いと言われていますので、フォントや文字の大きさに合わせて調節してみてください。

さらに、字間も広げて調節してあげると・・・

最初と比べると、かなり読みやすくなったのではないでしょうか!

このように、ちょっと気をつけて組んであげるだけで、文章の読みやすさは大きく変わってきます。

パワポやAdobeなど各ソフトで文章を入力する際、デフォルトの設定だと字間や行間が狭く読みにくい場合があります。
今回のことを少しだけ意識して調整するだけで、資料や制作物の完成度がちょっと上がるのではないでしょうか。

ここで1つ注意したいのが、字間も行間も、コンセプトもなく過剰に広げるのは良くありません。
下記の文章のように、意味もなく広げるとかえって読みにくい事もあるので、文字の大きさや文章量、状況に合わせて適度な間隔に調整してみてください。


おわりに

いかがでしたでしょうか?
文字組みはちょっとした変化で印象が変わるので、奥が深くとても楽しいものです。
拘りだすとキリがなくなったり、客観性を失い意図せず読みにくくなることもありますが…

コンセプトとルールを定め、読む人のことを考えれば、きっと綺麗な文字が組めるようになります。
興味を持って頂けた方はぜひ試してみてください!

それではまた!デジマースのコンドウでした。

Pocket

*簡単!Illustrator素材を作ろう『さくら』編*

こんにちはもしくはこんばんは!
デザイン業務に関わっております、スガです!
春を迎え、お店にはさくらをテーマにした限定グッズを見かけますね。

さぁ今回はそんな『さくら』をIllustratorで簡単に描くメイキングを
書かせて頂きます。簡単にできます。角度が上手くいかない!
問題ございません!1つ作ると多用できますのでとても便利かつ
今の時期には持ってこい、な内容になっております。
—————————————————————-
★作成環境:Illustrator CC(作成に於いてCSシリーズも対応)
★動作確認:Windows7
★所要時間:12分(慣れると5分)
—————————————————————-
*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼ラインナップ

今回ご紹介します『さくら』のタイプは3パターン。
基本作成の仕方は同じです。最後の調整のみ変わります。

▼『さくら』メイキング

■【Ctrl+N】またはファイルの新規よりA4のアートボードを開きます。
 今回、カラーモードはRGB

■ツールの楕円形ツールで円を描く。
【縦100px横60px・色#ff99c3】(基本的に楕円であれば何でもOK)

■ツールのアンカーポイントツールを選択し、上下のポイントをクリック。
(ペンツールを長押しで項目が出てきます)

■ツールのアンカーポイントの追加ツールを選択し、下記の様に2箇所に
ポイントを追加します。
(ペンツールを長押しで項目が出てきます)

■ツールのダイレクト選択ツールを選択し、下記の様に頂点のポイントを
少し下へ下げます。ここで花びらの形が決まります。

■花びらを五枚にする。以下好きな花の形へお進みください。

▼最後に

以上でさくらの完成です。いかがでしたでしょうか?
あくまでも数字は参考なので、いろいろ自由に試してみて下さいね!

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、またお会いしましょう!

Pocket

派遣登録でお祝い金10,000円プレゼント!春の就業意欲向上キャンペーンを実施中!

こんにちは。デザイン業務に関わっております、コンドウです。

だんだん日が延びてきましたね!
17時になってもまだ外が明るいと、なんだか得した気分になってしまいます。

今回は、いつもブログを読んで下さる皆様に、デジマースからお得なキャンペーンのお知らせです!

2017年3月7日(火)から2017年3月21日(火)の期間限定(※期間延長する場合があります)で、弊社求人情報サイト『ジョイジョブ』で、「派遣登録でお祝い金10,000円贈呈!」と言う就業意欲向上を目的としたキャンペーンを実施致いたします。


今だけ!登録お祝い金が480円から10,000円に!

ジョイジョブでは、派遣登録して下さったユーザーさんに登録お祝い金をプレゼントしています。
そのお祝い金が、通常480円のところ、キャンペーン期間中に限り10,000円になっています!
『ジョイジョブ』に訪れたユーザーの就業意欲を高め、応募者数・登録者数を増加させることにより、求人案件を掲載している企業の人材獲得を強くサポート致します。

1.キャンペーン対象の求人に応募

 

2.派遣登録会に参加

3.ジョイジョブからお祝い金を申請


業界初!継続お祝い金もプレゼント!

採用後3ヶ月間継続して働いたユーザーには、登録お祝い金に加えて、求人情報サイトとして業界初となる「継続お祝い金」を導入し、プレゼントしています。
ユーザーは登録お祝い金にプラスして、継続勤務でもお祝い金を受け取ることができ、継続率アップに繋がります。


【ジョイジョブとは?】

『ジョイジョブ』はスマートフォン向けの求人情報サイトです。
初期費用、月額費用、管理費用0円で、案件数や期間の制限なく求人情報を掲載することができる成果報酬型のサービスですので、余分なコストをかけずに、効率的に採用活動を行えます。
『ジョイジョブ』経由で応募したユーザーには登録お祝い金または就労お祝い金と、3か月の継続勤務で対象となる継続お祝い金をプレゼントしており、就労したユーザーの定着率増加が見込めます。

『ジョイジョブ』では、アパレルや携帯販売などを中心に人気の求人情報をたくさん紹介していますので、お仕事探しにご活用ください!


■サービス名称
ジョイジョブ

■URL
http://joy-job.jp

■Twitter
アカウント: @digimerce_PR
URL    : https://twitter.com/digimerce_PR

【本件に関するお問い合わせ先】
株式会社デジマース
担当者 : 堀内
TEL  : 03-5449-7922
E-mail : info@digimerce.jp

Pocket

UX(ユーザー・エクスペリエンス)を解釈してみた


ユーザー・エクスペリエンス(以下UX)の概念を解説されても、具体的に日々の業務に何がどう関係していて、どう進めるのか行動に結びつかないものですよね。
また、何とか概念を理解出来ても環境や開発体制、会社の文化などによって導入が難しかったりする場合が多いのではないでしょうか。
厄介ですねぇ。

今回はそんな厄介UXを何とかスマートフォン向けサービス開発に当てはめて都合よく解釈して導入出来ないか考えてみました。


UXってどういうこと?

そもそもUXの目線でサービスを設計するということを大雑把に短く言葉にすると、
ユーザーの需要があり、
ユーザーの目線で提供され、
ユーザーの望むゴールが達成できて、
ユーザーが心地良い!素敵!と感じてまた利用したいと思う設計を、
関わるプロジェクトチームメンバー全員が統一意識で、効率的に精度高くポジティブに開発を進めることと解釈してます。

一番重要なポイントは、
「だれに」向けた「需要」あるサービスなのかを明確に設定することで、この設定次第でサービスの成功が決まるのではないでしょうか。

以上を踏まえて、
「なにを」「いつ」「どこで」「なぜに」「どのように」提供するかを考ることでユーザー体験の設計が行えるはずですが、
ここでUX開発を難しくする環境の問題が出てきます。

実際のサービス開発では、何を売りたいか、どんな手段で提供したいかが、サービス側の事情から既に決まっている状態から企画がスタートすることがあり、その状態ではユーザー目線と需要から起案されることがそもそもないことです。

どんなにUX設計を心がけたとしても、
「ビジネス目線」からスタートした企画には、後付けでUXを適応する事は出来ないと考えておいた方が良いのではないでしょうか。

それでは、UX開発を具体的に設定してみましょう。


チーム内の役割を再認識する

UX設計のフローと、関わるメンバーのスキルについて整理してみます。
フローの内容と、それぞれの担当がプロジェクトに参加するタイミングを表にしてみました↓(注>あくまで弊社環境の場合です)

いかがでしょう?
まだまだ書き込む詳細は残っているので今後も表の最適化を進める予定です。

表のなかで注意が必要なポイントは、
会社やプロジェクトの規模、外部協力会社によって、担当欄一人それぞれの活動範囲に違いはあるところです。

中小規模プロジェクトであれば、幅広い工程を一人で担当することもあり、
大きなプロジェクトであれば、外部の協力会社も入り、各工程を専門スキルに特化した活動を分担して進めることになります。
専門スキルに特化するということは、難易度の高い設計がそれぞれに求められ、広く浅いスキルでは対応できない状況が多いのではないでしょうか。

それでは、ご自身の状況を重ねてみてください。

敢えてネガティブに例えると、
「プランナー」の立ち位置の方はほとんどの工程に関わりますが、
1人で黙々と設計を進めて結果を関係者に共有する流れが多いのではないでしょうか?
専門スキルをもつ各担当者と一緒に具現化作業を進め、多くの機能や仕組みを提案してサービスを充実させていくことが重要なんですが、なかなか責任感が柔軟的方向性を見えにくくします。

逆にプランナー以外のメンバーは、「サービスの製作には協力している…」という他人事意識になりがちな部分…あるのではないでしょうか;
どうしてもどこかで最終的な責任は関係しないという考えが消えずに協調性が不足します。

それぞれの立場が
「私(誰か)の考えたサービス」
の意識が無くならないかぎり、その視点で開発が進むと「UX開発」には到底ならず、
提供者側視点/ビジネス目線の、
マス(大衆)に向けたサービスから脱却はできないと考えられます。

その状態では今の時代の「有効ターゲット」に届かないから、UX設計が必要になってしまっているんですね。

UX設計は先ほどお伝えした通り、
「プロジェクトチーム単位」複数人で進める必然がある以上、
メンバー全員の意識統一が重要なのです。

「私達が考えたサービス!」

…声に出すとなかなか恥ずかしいものですが、割り切って声高らかにポジティブ意識をもってサービスのUX設計を進めてみましょう!

次回も、UXサービス設計の話題をしたいと思います。
以上、サービスデザインに関わっているデジマースのネモトでした。

/////////// 関連記事はこちら↓ ///////////

[必然的な利用シーン]環境/需要との接触


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

PhotoShopチュートリアル テキストエフェクト-氷編-

こんにちは、デジマースのはらです。
今回はTOP画像の「氷」エフェクトの制作方法をご紹介していきます!
ステップは簡単10ステップ!! 氷エフェクトはきっと夏でも冬でも使えるはずです。
※制作時間は15~30分ぐらいです。
※PhotoShopのバージョンはCC2017です。
※作業環境はWindowsです。今回はショートカットの紹介は行いません。

●PhotoShop上部メニューバーより/新規→数値を入力→OK

●「レイヤー」パネル下部のアイコンからベタ塗りを選択
ベタの色は何色でもかまいません。今回は♯bcbcbcに設定

●グループ「グループ1」を作成
“その中に”テキストレイヤー(文字サイズ200 px)を作成(入力テキストはひんやりとします)、その後「ひんやり1」と名前を変更
フォントはどのようなものでも構いませんが、太めのフォントがオススメです。

●「ひんやり1」レイヤーをコピーして「ひんやり2」レイヤーを作成
色はそれぞれ
「ひんやり1」 b0e6ff/「ひんやり2」 53d3d1 にします。

●ひんやり1に「ベベルとエンボス」と「光彩(内側)」を適用

A 8ce8ff B 68ddff

●「自動選択ツール」で背景の“余白部分”をクリック
注:テキストをクリックして選択範囲を作成すると仕上がりが悪くなります。

選択範囲が作成されました(“ひんやり”は一発で全ての余白を選択できますが、それ以外の切れ目のない空間のある文字(「あ」や「の」)などは内側も選択してください)

●上部メニューバーから「選択範囲」矢印「選択範囲を反転」を選択

●「グループ1」を選択し、パネル下部「レイヤーマスクを追加」アイコンをクリック

レイヤーマスクが作成されました

●レイヤーマスクを“選択したまま”
上部メニューバーより「フィルター」→「変形」→「波形」を選択

下記赤枠部分を入力+チェック

●「ひんやり1」レイヤーにドロップシャドウを追加
(色は白 ffffff です)

完成!

パッと見たところ味気ないですが、文字のエフェクトはこれで完成です。
詳しい方ならこれ以降の説明は特に不要だとは思いますが、簡単にアレンジ方法をご紹介いたします。

●「ひんやり2」を複製して「ひんやり3」を作成し、レイヤーの描画モードを乗算に変更。その後、「グループ」1の外に出してベタ塗りの一つ上に配置し、色を白に変更

●「グループ1」のレイヤーマスクサムネールにカーソルを合わせ右クリック→「選択範囲とマスクの共通範囲」をクリック。またはcommandキー(win:Ctrl)を押しながらレイヤーマスクサムネールをクリック

●メニューバーから/「選択範囲」→「選択範囲を変更」→「縮小」→縮小量に「1」と入力しOK

●「ひんやり3」を選択し、パネル下部「レイヤーマスクを追加」アイコンをクリック

●「ひんやり3」にレイヤースタイル→「ドロップシャドウ」を適用
(色やサイズはお好みでどうぞ)

●「ひんやり2」レイヤーの不透明度を45%に変更
(不透明度やレイヤーの描画モードを変更することによって雰囲気を調節できます)

●「ひんやり3」レイヤーの下にお好きな背景を配置

完成!

他にも文字の上に雪をのせたり、少し溶かしてみたり、冷気を加筆したり…。様々なアレンジ方法がありますが、全部紹介すると本が書けてしまうのでこれでアレンジ完了としたいと思います。
それではまた次回。

Pocket