2016年 5月 の投稿一覧

縦長Webページをデザインする際に役立つPhotoshopの小技3つ

近年スマートフォンの普及によりシングルページの案件が増えて縦長のWebページをデザインすることが多くなりました。カンバスサイズの高さが5,000pxを超えることも多々あります。そうなると作業をする上で余計に手間がかかってしまうことがあります。それを少しでも解消できる小技を今回紹介させていただきます。

1.画像配置の位置指定

通常はPhotoshopで「埋め込みを配置」や「リンクを配置」をすると表示領域の中心に配置されます。

しかし狙ったところに配置したい場合があります。そういうときはカンバス上の配置したい位置に選択範囲を作成して「埋め込みを配置」や「リンクを配置」をすると選択範囲の中心に画像を配置することができます。

2.快適に表示位置を変更する

縦長のWebページをデザインしているときページ上部から下部に表示を移動したい場合、拡大縮小やスクロールをするなど手間がかかります。そんな時は「H」キーをクリックしたままカンバス上をドラッグしてみてください。快適に表示を移動することができます。

3.レイヤーを任意の場所に瞬間移動

パーツを複製して使い回すことがあると思います。複製元のパーツがページの上部にあり使用したい位置がページ下部だとしたら移動に手間がかかります。そのようなときは複製したパーツをレイヤーパネルで選択した状態で、カンバス上の移動したい位置に選択範囲を作成して[レイヤーメニュー]/[レイヤーを選択範囲に整列]/[垂直方向中央]を選択して移動します。

ちょっとした小技を積み重ねることによって大きく作業効率をあげることにつながります。今後も小技を探求していきたいと思います。

OGP画像作成を効率化

OGP画像の作成を効率化させるPSDフォーマット

OGP(Open Graph Protocol) とは、このWebページの説明をSNS上で表示させるために用意された仕様です。OGPを設定しておくとSNS上で「いいね!」やシェアをされた際にあらかじめ指定した画像、タイトル、ページの説明、URLを表示させることが可能です。OGPを設定していない場合は自動でページから情報を取得して表示されるので思い通りの表示にならないことが多いです。
下記画像はOGPを設定していない場合(上)としている場合(下)の表示の違いになります。

どちらがいいかは一目瞭然です。OGP設定前のサムネイルは小さいし中途半端な位置で切り抜かれてしまっています。「いいね!」や「シェア」を増やしたい場合は必ず設定しておきたいですね。今回は簡単にサイトにOGPの設定をできるようにPSDフォーマットを作成したのでご紹介させていただきます。

まずはPSDデータ(1.1MB)をダウンロードしてください。

DOWNLOAD

OGP画像作成〜OGP設定手順

OGP画像を作成する

(1)ダウンロードした「ogp.psd」を開いてレイヤーパネルで「ogp.png」をダブルクリックしてスマートオブジェクトを編集します。

(2)OGP画像をデザインします。(サイズは推奨サイズの1200px × 630pxです)
完成したら上書き保存をしてスマートオブジェクトを閉じてください。

(3)元のファイルに戻って左下の表示イメージを確認します。縮小されて文字などが見にくくなったりしていないか確認します。

(4)レイヤーパネルで「ogp.png」を選択して右クリック。「PNGとしてクイック書き出し」を選択して画像を書き出します。書き出した画像はサーバの任意の場所にアップロードします。

※そのままの画像ファイルだとサイズが大きいので下記サイトのようなファイルサイズ圧縮サービスを利用してファイルサイズを軽くすることをおすすめします。

TinyPNG https://tinypng.com/

htmlを編集する

(1)次にファイル右下のテキストレイヤー(metaタグ)を自分のサイトの情報に編集します。
下記コードには先ほどのサーバにアップしたOGP画像へのパスを入力します。
<meta property=”og:image” content=”http://www.□□□□□□/ogp.png”/>

詳しくはこちらのページで詳細が解説されています。
FacebookのOGP設定方法+参考記事6選|ferret

(2)編集し終えたらソースコードをコピーしてhtmlをテキストエディタなどで開き任意の場所へペーストします。

(3)編集したhtmlファイルをサーバにアップロードしてOGPの設定は完了です。

(4)下記ページでサイトのURLを入力するとプレビューが表示されるので正しく設定ができているか確認しましょう。
Sharing Debugger https://developers.facebook.com/tools/debug/sharing/

以上が「OGP画像作成を効率化」の解説でした。

Bootstrap × Photoshop 「Bootcomp」エクステンション

kv

Bootstrapを使用するWebサイトのカンプ制作を高速化させるエクステンンション

Photoshop CC 2015に「Bootcomp」エクステンションを導入すればBootstrapの使用を前提としたサイトのデザインカンプ制作にかける時間を大幅に短縮することができます。
特設サイトを用意したのでそちらをご覧ください。