もっともっとモックアップを活用しよう 1

candle-mock-up

Mockup(モックアップ ※模型の意)とはデザインなどの現場で使われる手法の一つで、作成過程で完成イメージをビジュアル的に確認するために使われるもので、プレゼンテーションやブランディングイメージ作成シーンに欠かせないものとなっています。

一から自分で制作することもできますが、最近は.PSD(フォトショップ形式ファイル)などの無料素材が豊富にあるのでそのような素材を利用することで簡単に見栄えのするモックアップを制作することができます。

今回はそのような無料素材を使ってモックアップを制作する手順を紹介します。
※手順と言ってもフォトショップがあればだれでもできます。

↓ 今回はこの無料サンプル素材を使用します。
Free Sample Candles Package Mockup set

リンク先ページの「DOWNLOAD FREE SAMPLE」をクリックするとダウンロードページに飛ぶので、価格入力箇所に「0」を入力して「ダウンロード」ボタンをクリックしてダウンロードします。

ダウンロードしたらZIPファイルを解凍し、中に入っている.psdファイルを開きます。

するとパッケージが真っ白のモックアップコンテンツが4つ表示されます。
4つのコンテンツはそれぞれフォルダでグループ化されているので、

フォトショップ操作

変更したいコンテンツのフォルダを開き、中に入っているスマートオブジェクトレイヤーをダブルクリックすると別ファイルで編集画面が開きます。

開いた編集画面にモックアップのパッケージに表示したい画像を配置し、当該ファイルを保存すると自動的に元ファイルのスマートオブジェクトに反映されます。

使いたいコンテンツにそれぞれ画像を適用したら、コンテンツの位置変更やトリミング、その他の編集を施したら画像を書き出して完成です。

4つのうちの2つのパッケージの画像を変更してトリミングしただけの簡単な編集ですが、以下のように見栄えのする画像ができあがります。
※今回は行いませんでしたが、キャンドルの色などその他いろいろと変更したりできます。

candle-mock-up

最後にプラスチック製マグカップのモックアップを真夜中WEB仕様に編集してみました。
Freebie! New Glass Mug Animated Mockup こちらのモックアップはぐるっとまわる動画も制作できるようです。(静止画版のstaticと動画対応版のanimationがあります)

よく使うワードプレスのphp関数スニペット。随時追加

しょっちゅう使うわけではないけれど、ワードプレスを使うサイトが多くなってきたことに伴い使う頻度は増えてきたワードプレスの関数をその都度調べて記述するのもめんどくさくなってきたのでまとめてみました。 ● まずは、htmlフ…続きを読む

Google fontsで日本語Webフォントの正式版がリリースされたらしいので試してみた

typography

いままでもGoogle fontsは「Google Fonts + 日本語早期アクセス」として日本語WEBフォントを無料で提供していましたが、今回正式に8種類の日本語WEBフォントがリリースされたようです。 Google…続きを読む

Atom vs VSCode vs Brackets、もっとも使いやすいエディタはこれだ!…といいな

typewriter

真夜中WEBではWYSIWYGエディタを使用せず、テキストエディタを使ってホームページ制作を行っております。 具体的にはWindowsでは「サクラエディタ」を、Macでは「mi」を使用しているんですが、OSごとにエディタ…続きを読む

DNSサーバーを切り替える前に切り替えた後の表示を確認する方法

理由は様々ですが、既存のホームページをまるごと他のサーバーに移転したいとのご依頼を承ることがあります。 通常の静的なサイトの移転でドメインが変わらない場合には基本的にサーバーに置いてあるフォルダ・ファイル群を古いサーバー…続きを読む

もっともっとモックアップを活用しよう 1

candle-mock-up

Mockup(モックアップ ※模型の意)とはデザインなどの現場で使われる手法の一つで、作成過程で完成イメージをビジュアル的に確認するために使われるもので、プレゼンテーションやブランディングイメージ作成シーンに欠かせないも…続きを読む

WEB制作お役立ちツール1 (人型アイコン、アバター画像作成)

WEBサイト制作では、暫定的に使う、いわゆる「アテ」画像がほしいときがあります。 一言でアテといっても、写真ぽいアテ、無地画像のアテなど案件によって様々です。 このような画像は「ダミー画像」などで検索するとたくさん出てく…続きを読む