簡単! ゆるゆるイラストチュートリアル①[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