Webデザインに使いたい! Photoshopスマートオブジェクトのススメ

ttl

Webデザインのカンプ完成にいたるまでに、ディレクターやクライアントからの校正を重ね、その都度、何度か編集作業が必要になってくることが多々あります。

しかしPhotoshopで編集する際、画像の劣化にどうしても気をつかわなくてはなりません。

しかし、スマートオブジェクトを活用することで
そういったことを気にせず修正作業をすることが可能になります。

Webデザインにおいて、なにかと便利なスマートオブジェクト。
今回はそんなスマートオブジェクトの使いどころをご紹介します。

続きを読む Webデザインに使いたい! Photoshopスマートオブジェクトのススメ


ハッシュタグを見極める

Twitterも身近なツールとなっていますが、いろいろな利用をされるためタグといえる『ハッシュタグ』も乱立していて、普通に『日本語ハシュタグ』も増え続けています。
そこで、使われているハシュタグが何の意味を持った物なのか?

または、これから利用するハッシュタグが思わぬジャンルで使われていないかチェックする場合、使えるサイトがあります。

ハッシュタグクラウド

ハッシュタグクラウド:http://hashtagcloud.net/

このサイトでは、ハッシュタグの検索はもちろんの事

ジャンル別のランキング、開催予定のイベントで使われているハッシュタグ、最近出現したハッシュタグなどを見る事ができます。

1つのハシュタグに関し…基本的に登録制なのですが、タイトル、カテゴリー、ハッシュタグの説明を見る事ができます。(登録されていれば)

また、、関連するハッシュタグや最近のツイート状況も確認できるグラフも付いていますので、どれほどの勢いがあるかもチェックできます。

検索エンジンにも拾われやすいようなので、イベント・広告などでハッシュタグをもうける場合、先にハッシュタグクラウドで登録を行ってから拡散したほうが後々の拡散状況や関連するモノやコトをチェックする事が簡単にできますので少しでも情報は多い方が良いと思いますので、利用してみて下さい。

 


制作事例 椎谷板金工業様

siiya

 

屋根、外壁、雨樋から採光システムまで、
快適な暮らしのための修理・施工工事は私たちにお任せください。

公開 2015年4月17日
URL http://www.yane-toi.com/
TYPE コーポレートサイトリニューアル
CMS Wordpress

●リニューアル前の課題と要望
・新しい事業(採光システム)始めるにあたってホームページに情報が無い。
・デザインが古いので新しいデザインにしたい。
・施工実績も更新できるようにしたい。

●リニューアル後
・CMSを導入することにより、施工実績を更新できるようにした。
・新しい事業(採光システム)のページを増やし業務内容を充実した。
・サイト内構成を整理して、ユーザーの導線を明確にした。


Twitterのタイムラインを埋め込む

150424_01

 

みなさんお花見はしましたか?どこかおすすめはありますか?

出店で食べるお好み焼きが好きです。

新潟もたくさんお花見スポットがあるので、来年ぜひ行ってみてくださいね。

 

さて今回はTwitterのお話です。

サイトのサイドとかフッターにTwitterのタイムラインを埋め込むのは良く有ると思います。今回はその基本的なカスタマイズについてです。

Twitterウィジットのコードを取得する

Twitterにログインしたら、「設定」→「ウィジット」と進めます。新規作成ボタンからTwiterウィジットを作ります。150424_02

基本的な設定はこの画面で行います。

設定する項目は

  • ユーザー名
  • @ツイート除外の有無
  • 画像を自動で開くかどうか
  • 高さ
  • テーマの色(light/dark)
  • リンク色

です。

設定が終わったら「ウィジットを作成」ボタンでコードが表示されるので、表示されたコードをコピーして自分のサイトへ貼付けます。これで基本的にTwitterのタイムラインを埋め込むことができました。


Twitterウィジットをカスタマイズする

埋め込んだウィジットのdata-chrome属性でカスタマイズができますよ。

data-chrome属性で変更できる設定は

  • noheader:タイムラインのヘッダーを無くします。
  • nofooter:タイムラインのフッターやツイートボックスを無くします。
  • noborders:ボーダーを削除します。
  • noscrollbar:タイムラインのスクロールバーを削除します。
  • transparent:タイムラインの背景を透明にします。

今回はスクローバー以外は全部設定してみました。data-chrome属性を複数設定する場合は半角スペースで繋ぎます。transparentで背景が透明になっていることに背景を設定したボックスの中に入れてあります。

data-chrome属性以外にも、幅・高さ・ボーダー色・表示するツイート数なども設定できるようです。

詳しくは「カスタマイズに関するドキュメント」をご覧ください。

これでサイトデザインに合わせて使いやすくなりましたね!しかし前からこんなに変えられたかなぁ。

 

AGN Web TeamでもTwitterしてます。お気軽にフォローしてくださいね!@agn_web

ちなみにFacebookはこちら


アップデートに失敗したワードプレスの復旧

桜の遅い新潟ですが、それでも花見に行く前に葉桜になりそうです。

何の脈絡もありませんが、今回もWordPressのはなしを。

wp_up01

ダッシュボードから簡単にシステムのアップデートができるWordPressですが、たまに更新に失敗して、「メンテナンス中」から復旧できなくなることがあります。プラグインのアップデートでもあります。
なんかアップデートが進まないなぁ、と思ってサイトを表示させようとしても、メンテナンスモードのまま、

wp_up02

と、なって、何も受け付けなくなってます…。
プラグインとの相性か、サーバーのPHPのバージョンか、原因は様々です。
ログインも出来なくなるので焦りますが、以下の方法で復旧できます。

慌てずFTPでインストールフォルダにあるファイル、「.maintenance」を削除しましょう。
とりあえず元に戻ります。
ファイルそのものは一時ファイルですので、削除しても問題ありません。
あとは原因を探ってから、再度更新しましょう。

私は先日この症状が出た時は、WordPress側の新バージョンが出るのを待ちました。
消極的解決法。


ディレクターとデザイナーのイメージ共有

business_2_mika

4月に入りまして、花粉さえ飛んでなけれは、
いい季節になりました。

今回は、デザイナーに作業をお願いするときに
気を付けていることをまとめました。

PAK88_tetuyaakenosyain20141123141151500

私は、普段webディレクションの仕事していて
お客様から聞いてきた内容を元に、構成案とデザイン案を制作します。
構成案は自分で作成すればよいのですが、ページのデザインはデザイナーにお願いします。

デザイナーへの説明がうまく伝わらないと、
「イメージと全然違う」
「何度も修正が入って予算をオーバーしてしまった」
などのトラブルが起こってしましまいます。
ドラマで良くある「○○君これお願い。」みたいに何の説明もなく
仕事が上がってくることは、ほぼありえません。

上記のトラブルが起きないよう
私がデザイナーにお願いするときの注意点をまとめてみました。

 

1.情報、目的、サイト構成の説明
D0011_udemakuri420140830142954500
デザイナーにお客様の情報や目的、サイト構成を説明するようにしています。
まずは、ディレクターとデザイナー同じ情報を共有することがスタートラインです。
ここをおろそかにすると、後々大きなズレが生じる場合があります。

 

2.掲載情報
AL001-1onakakaigi20140830500
掲載内容と情報の順位付けを行い指示します。
デザイナーが構成に時間をかけて、後ですりあわせを行うよりも、
はじめから指示をした方がスムーズに作業を行えます。

 

3.色の指定
PAK85_iroenpitunaname131310500
メインカラーを指定します。
お客様指定の場合もありますし、デザイナーと相談して決める場合もあります。
どちらにしろ明確に指示します。
サブカラーは状況に応じて指示しています。

 

4.テイストの近いサイト
Green15_jyougi20141123165428500
他のサイトを使ってイメージやデザインの方向性を伝えます。
最低3~4サイト用意します。
コピーサイトにならないように、
全体の雰囲気や部分的に参考にするなどサイトによってどこを参考にするのか説明します。
デザイナーに考える力をつけるにはこの方法はおすすめしませんが、
私は、感覚・雰囲気など、言葉で明確に表現しにくい部分を共有するために使用しています。

 

5.スケジュールの確認
PAK85_yoteihyouwotukerubiz500
今持っているスケジュールを確認して無理のない納期を設定します。
あまりにも短納期で仕事を詰めすぎると、それなりのデザインしか上がってきません。
全ての仕事でできるわけではありませんが、意識して行っています。

 

まとめ
以上の点を意識して行っていますが、
いきなり100点のデザインは上がってきません。
デザイナーがお客様と直接お話しできれば、デザイナーの能力の問題となりますが、
お客様 → ディレクター → デザイナーの場合は、
ディレクターがお客様の話をまとめて、デザイナーに指示していますので、
半分はディレクターの責任だと思います。
「思ったものをあげてこない」ではなく、「思ったものをあげてもらう」ために何をするかが大事だと思います。