スマートフォンアプリのスプラッシュ画面をデザイン機会があったので、参考にデザインを収集しました。 Pokémon GO 公式: Pokémon GO 皆さんご存知のポケモンGOです。NIANTICのロゴの下に横線があるのですが、こちらが簡単なローディングのバーになっています。 （画面が切り替わってもまだ読み込んでいるのでどこまで読んでいるのか謎ですが…） どうぶつの森 ポケットキャンプ 公式: どうぶつの森 ポケットキャンプ こちらも昨今のトレンド、どうぶつの森です。ゲームの […]

最近、Web制作のご相談を受けていて、お客さまから「デザイナーな芸術家じゃないんだかさ！」というお話を伺うことが続いて何度かありました。 話のきっかけは、あるお店の名刺やロゴデザインをデザイナーにお願いした際に、早く名刺と店の看板用にロゴが欲しかったのに、なかなか納品してくれなかったという話でした。 詳しく理由を伺ってみると、作業自体が間に合っていなかったのではなく、デザイナーがロゴにいまいち納得いかないから納品できない、ということで納品してくれなかったそうです。 そのロゴと […]

今日はアプリのモックアップなどを作成する時に便利なTipsを紹介します。 例えばこの状況で、headerの色やボタンの色に変更が入ったら、とっても面倒ですよね。ページがたくさんあればなおさらです。 沢山あるオブジェクトをひとつひとつ選択して色を変更しても良いですが、実はこの作業はもっと時短できます。 共通の塗りをまとめて変更する2つの方法 時短の方法は2つあります。Illustratorって便利ですね。 方法1：何度も使用する色を「グローバルなカラー」としてスウォッチに登録す […]

こんにちは。工藤です。 今回はSVGアニメーションを気軽に作成できるLazy Line Painterについてご紹介します。 1.jQuery本体とjquery.lazylinepainterを読み込ませよう とりあえずはjQuery本体とGithubからダウンロードした『jquery.lazylinepainter』を読み込ませます。 2.SVG画像を読み込ませてサイト上からコードを作成 サイトをスクロールした箇所にSVG画像を読み込ませるエリアがあります。そちらにillu […]

今回はこちらのペンギンの写真に帽子をかぶせる合成をしてみましょう。 ペンギンの写真は青みのトーンが強く、女性の写真は赤みの強い写真なので、このまま切り抜いて合成してしまうと帽子が浮いて見えてしまいます。 そんな時にはphotohsopの「カラーを適用」という機能が大変便利です。カラーを適用の機能について、使い方をお話ししたいと思います。 手順 大まかな手順は下記です。10分程度の作業で完成します。 1.合成元の写真と、合成したい写真、両方のファイルを開く 2.合成したい写真に […]

2018年度、戌年のWeb年賀状を作成しました！ 文章や住所を書き換えて、お手持ちのサーバへアップすれば、簡単にWeb年賀状を作成できます。 後は丁寧な文言でメールにてURLを送ればOK完了です。紙の年賀状を刷らなくても良いのでコスト削減にも。 商用利用OKです。ぜひご利用ください。 DEMO zipファイル 更新方法は以下をご一読ください。 更新できる箇所 ①あいさつ文 ②署名 ③画像 ④会社ロゴ ⑤住所 ⑥URL zipを解凍すると、「inde.html」というフォルダが […]

昨今、もう切っても切り離せないWEBやアプリ。私自身職業柄、デザイナーの知り合いが多く、良くWEBの注意点を質問されることが多いです。今回はその注意点と、簡単な説明をしてみたいと思います。 対応の端末を事前にしっかりと確認する 事前に確認しておかないと後で工数が予想外に増えてしまったりしてしまうので要注意です。 レスポンシブデザインが主流になりつつある昨今、「スマートフォン専用サイトも必要」と言われれば、デザインを2種類起こす必要が出てきます。タブレット専用も欲しいと言われれ […]

今回も自作背景を作っていきましょう。今日のテーマは「星空」。 手順 01.星を散らす 02.空の写真を調整・合成する 実はとても手順が少なく、カンタンに作成できます。 01.星を散らす まずは画面に星を散らしていきます。まずは下準備。白一色のカンバスを用意します。 色の設定をします。 描画色を白、背景色を黒にします。 「フィルター」＞「フィルターギャラリー」＞「ちりめんじわ」を選択し、下記のように適用します。 これだけでだいぶ星空にらしくなりました。 02.空の写真を調整・合 […]

ここにこういう素材が欲しい…けれどちょうどよい素材が無い。そんな時は自分で素材を作ってしまいましょう。 今日はphotoshopで空を描きたいと思います。素材は沢山作り方のチュートリアルがありますが、今回は私なりの方法をご紹介します。 サイトに使いたい写真の空を思い浮かべて… 慣れれば短時間で作れますし、どんどん応用が利くと思います。 手順 01.ベースの青グラデを作る 02.雲のベースを大まかに描く 03.雲の影を入れていく 04.ぼかす 05.遠景を追加 06.レイヤーを […]

今回はバナーとメインビジュアルを集めました。 個人的には、人物モデルの写真を組み合わせて作るデザインが気に入っています。 普段から、勉強も兼ねてこのデザインいいなと思った時には手元にデザインを残していたりします。

こんにちは、工藤です。 今回はフリーでアイコンを提供してくださっているサイトをご紹介します。 icooon-mono シンプルで使い勝手のいいアイコンだけではなく、ちょっと変わり種のものまで幅広く扱っているのが魅力的です。 なんと6000種類もあるようです。 pngからAiのようなベクター画像も用意されており、サイズや色を調整してからのダウンロードも可能です。 Icon rainbow 上記のicooon-monoさんと少々似ていますが、こちらはどちらかというとイラストのテイ […]

今回は人物のレタッチを紹介していきます。 使用するのはこちらの写真。 ヘアスタイルを修正 まず、看護師さんなので髪をまとてもらいましょう。 必要な箇所を選択し、切り抜いていきます。 とびでている髪の毛なんかも、除外してしまいましょう。 清潔感が欲しいので、耳を出します。 他の写真から耳を切り抜いて、色調を補正し、合成します。今回はカラーバランスで調整しました。 耳合成しました。これでヘアスタイルは完了です。 服や小物の色を調整する 聴診器がおもちゃみたいな色なので、調整します […]

案件によっては、撮影などの機会がなく、担当の方が撮った写真を素材としてデザインをまとめるという状況も多々あります。 その時に少しでも写真が美しく見えるよう、写真の補正や簡単なレタッチを行うことがあります。 そのうちによくやる補正の方法をいくつかご紹介したいと思います。 photoshopでどんどんこなしていきましょう。 全写真共通 写真の輪郭をくっきりさせる 室内の写真なんかでありがちな、トーンカーブやレベル補正ではちょっと足りないという時に最適です。 今回はこの写真を使用し […]

（動かない場合、firefoxまたはChromeで確認すると動きます。） 上記の画像はapng形式のアニメーション画像。 gifアニメーションと違い、アルファ情報を含めることもできます。ファイルサイズもgifアニメと大差はないとのこと。 いつの間にかLINEクリエイターズスタンプにてapngの取り扱いも開始していて、今後アプリの作成なんかではどんどん主流になっていくと思うので今のうちに作り方を確認しておきたいと思います。 フリーソフトを使って作成します。 2016年11月現在 […]