投稿者: 森島

Webデザイン

Photoshopで、動画データ(mp4)をもとにGIFアニメーションを作成する

Photoshopでmp4データを扱える 実は、Photoshopで、mp4の簡単な編集なら行うことが可能です。ご存知でしたか? トリミングやほかのフェードインフェードアウトくらいのエフェクトなら使用できるので、GIFアニメーションを作る際にはとても便利です。 スマートフォンで撮った動画や、画面キャプチャ動画なんかも簡単に素材として取り入れることが可能です。 ブログで解説の記事を書く際や、シネマグラフ手法を取り入れたデザインを作る時などにも大変役立つのでぜひ覚えてくださいね。 […]

Webデザイン

UI/UXデザイン界の新しい風!Adobe XD CCを便利に使い倒す!

UI/UXデザインがラクラク!カンプデータが簡単に作れる Adobe XD サービスを立ち上げる時、まずは、画面の仕様や動作遷移の確認に、画面の設計を行うと思います。 いわゆるプロトタイプですね。(より完成品のイメージがしやすいよう、紙芝居のようなものを作ります。) iPhoneアプリ Andoroidアプリ Webサービス など… AdobeXDは、プロトタイプが簡単に作成できるアプリケーションです。 操作が非常に直感的で、画像をドラッグドロップするだけでマスク […]

Webサービス

【おすすめバグ管理ツール(BTS)】チームでの開発がうまくいく!オススメツール7選

皆様はプロジェクト開発の情報共有に、どんなツールを使用中でしょうか。 今お使いのツールが使いにくいと感じたことはありませんか? バグ管理ツール(BTS)は、プロジェクトの理想的な進行管理に際し、必須と言っても過言ではないと思います。 本記事では、理想的なプロジェクト進行管理のため、 簡単に各サービスのポイントをおさえながら、おすすめを紹介していきます。 そもそもバグ管理ツールとは? バグ管理ツールとは、以下の手順を踏んで、プロジェクトのバグを潰していくためのものをいいます。 […]

Webデザイン

Illustratorでアミカケ。自作の柄パターンを登録する。

今回はIllustratorでスクリーントーンのようなアミカケを作ってみましょう。 応用で斜線や複雑な柄のパターンも登録できます。(Illustrator CCを使用して解説していきます。) アミカケを登録 パターンを使用する時は、スウォッチに登録します。 01.パターンを作る まずは1pxのアミカケを作ってみましょう。今回は長方形ツールを使用します。 実際に作る時は、作成したいパターンに合わせて好きなパスツールを使用してください。 02.作ったパターンをスウォッチパネルに登 […]

マークアップ

【SEO】「クーポン情報」にイベントの構造化データにを使用するのはガイドライン違反!?

構造化マークアップもSEO的に無視できなくなりつつある昨今ですが、イベント情報の構造化データをサイトで使用している方は要再チェックです。 Googleのガイドラインに、イベント情報の構造化データに「割引クーポン」を追加するのは違反であるとの記述が明確にされました。(2017年11月末) その他にもイベントと関係ない情報をイベントとしてマークアップすることをやめるように書かれています。 場合によっては、Google側からの手動対策の対象となるため、早めの修正が必要となります。検 […]

マークアップ

多言語サイトにはhreflangタグを入れよう!

hreflangというタグ、ご存知でしょうか?実はこのタグ、多言語サイトを作る時に重要な動きをしてくれるタグなんです。 どうして必要なの? 機会損失を防ぐ 例えば日英の2言語に対応しているサイトがあったとして、英語圏のユーザーがサイトを訪問した際に日本語が表示されてしまい、読めずに離脱してしまう…そんな状況。 そこでhreflangタグの出番ですが、このタグの作用は検索結果の画面で現れます。検索を行ったユーザーが使用する言語に合わせて、検索結果が返されるようになります。英語圏 […]

Webサービス

PPC?CPM?ややこしい!WEB広告の用語解説

PPC、CPC、CPM、……様々な用語が煩雑としていますが、なんとなく調べないまま過ごしていませんか?今回はWEB広告の用語を簡単にまとめました。 広告手法の種類 ディスプレイ広告 閲覧中のWebサイトやアプリに表示される画像を使用した広告のことです。バナー広告とも呼ばれます。スマホで遅れてスゥッと現れるバナーなんかもこれに分類されます。 リスティング広告 Googleなどの検索エンジンで、検索結果画面に表示されるテキスト広告のことです。 インフィード広告 ニュースサイトを閲 […]

スマホアプリ

GooglePlayバッジを設置する時にUTMソース(utm_source)を設定する

GooglePlayのバッジ作成ツール。 Androidアプリをリリースし、サイトやブログにGooglePlayバッジを設置する時に、みんなが開くページです。 そのうちの、こちらの入力フォーム。 UTMソースとUTMキャンペーンの入力欄。 省略可って書いてあるし…と、なんとなくスルーしていませんか? 実はこれ、キチンと使いこなせるとユーザー分析の際に役立ちます。 「公式サイトにはこのソース、ブログにはこのソース」などと使い分けることで、獲得したユーザーがどこのリンクから辿って […]

Webデザイン

【スマホアプリ】スプラッシュ画面デザイン集

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

Webデザイン

【photoshop】複雑な画像を毛先まで簡単に切り抜く方法

今回は、「選択とマスク」機能を使用した画像の切り抜きを紹介します。全体で10分程の作業です。 使用するのはこの画像。女の子の髪の毛と背景の切り抜きが複雑そうです。 切り抜く範囲を大まかに選択する クイック選択ツールなどを使い、女の子を大まかに選択します。毛先や透けて見える背景の緑は後で調整するので無視して大丈夫です。 「選択とマスク」機能を開く メニューから、[選択範囲] > [選択とマスク]。 選択とマスクのワークスペースへ画面が切り替わります。 作業に適した表示を選ぶ 属 […]

Webデザイン

【Illustrator】複数の要素のカラーを一括で変更するワザ

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

Webデザイン

【photoshop】トーンを合わせて写真を自然に合成する

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

Webデザイン

【フリー素材】Web年賀状を送ろう!

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

Webデザイン

紙面デザイナーが、WEBやアプリをデザインする時に注意したいことまとめ

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

マークアップ

SVGとCSSを使って複雑な形のボタンのhoverを設定する

リンクやボタンにマウスオーバーの動きを設定する際、CSSアニメーションを利用するのもすっかりと一般的になりました。 ここで問題になってくるのが、透過画像にアニメーションを設定すると、一件図形の範囲外である透過部分でもhoverの判定がされてしまいます。 透明チェック部分にマウスカーソルを当てると、アニメーションが出てしまう。 PCから動作を確認してください。 別タブで表示 これをimgではなく、SVGのpathやpolygonに設定すると、無事解決することが出来ます。 SVG […]

マークアップ

HTMLに「role属性」を付与してWebアクセシビリティの向上を目指す

今日は、HTML5より正式に採用された「role属性」について書きたいと思います。 role属性とは role属性は、このように使用します。 見ればどういったものかなんとなく分かると思いますが、この場合はdiv要素に対して「ナビゲーション」の意味を付与しています。 では、実装する必要はあるのか 2016年04月に「障害を理由とする差別の解消の推進に関する法律」が施行されました。「障害を理由とする差別」の解消に努めるという主旨の施策なのですが、その中に「情報アクセシビリティ」も […]

Webサイト制作

キャッチコピーやデザインの説明に使えるワード集

日頃、キャッチコピーやデザインの説明を考える際に時間がかかりがちなので、時短のためにワード集を用意しました。この中からイメージにあった単語を拾ってきてアレンジ。デザイン用語ではなく、分かりやすいイメージを幅広く集めています。(色の違う文字は好きな単語を当てはめてください) 「どんな」「何」「どうした」の3種類でざっくりと分類しています。 ワード集のエクセル版はこちらから どんな 印象的な ダイナミックに 力強い さりげなく 整然とした 統一感のある 有機的な 左右対称の 抜け […]

Webデザイン

【自作背景】星空をつくる

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

Webデザイン

【自作背景】photoshopで雲を描く

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

マークアップ

オブジェクトを生成する関数を作ろう CreatJS

その他の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その2 === 基本的な、オブジェクトの生成からトゥイーンモーションをまで設定する方法を作成しました。今回は、オブジェクトを生成する関数をinit関数の外に出して、何度でもパーツ化する手法を記事にしたいと思います。 今まではinitの中にあったものをinit関数の外に […]

マークアップ

トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その2

前回の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 === 前回はオブジェクトを生成してアニメーションさせるところまでを記事にしましたが、実際に使用するにはもっとたくさんのオブジェクトが必要で、複雑なアニメーションが求められると思います。では、複数のオブジェクトを作るにはどうするか。今回はそちらを書いていきたいと思います。 単純にオブジェクトを複数作ると… まずオブジェクトを1つ作る場合はこうでしたね。 単純 […]

マークアップ

トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1

後学のためにトレンドのJSを調べていたのですが、 jQueryから入って、フロントエンドのアニメーション・マウスイベント程度しか利用しないデザイナーの私でも導入できそうなJSを見つけました。 CrateJSとは? CreatJS こちらのJS、特徴はjQueryのようにメソッドチェーンで複数の処理を繋げることができます。 イージングもききます。アニメーションをループさせることもできます。 もうひとつ大きいのが、トゥイーンモーションが使えます。 過去にFlashでアニメーション […]

Webサイト制作

【SEO対策】itemtype、itempropの調べ方【schema.org】

————————– 前回の記事 → 「【SEO対策・schema.org】itemscope、itemtype、itempropの基本」 基本についてはこちらの記事をご一読ください。 ————————– 今回は「自分のサイトに合うitemtype、itemprop […]

Webサイト制作

【SEO対策・schema.org】itemscope、itemtype、itempropの基本

—————————– 続編の記事を公開しました→「【SEO対策】itemtype・itempropの調べ方【schema.org】」 —————————– HTML5より、新しいプロパティが追加されました。(実質HTML4でも使えます) i […]

Webデザイン

バナー・メインビジュアル デザイン集

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

1 2 3 4 5 13