WEBデザイン&フォトグラフサイト -LALA-ROCKETS- tag:lala-rockets.com,2007-09-24:/blog//1 2012-01-25T12:15:26Z WEBデザインと写真と日々の備忘録 Movable Type Publishing Platform 4.01 ブログにFacebookコメント欄を追加設定 tag:lala-rockets.com,2012:/blog//1.119 2012-01-25T12:08:09Z 2012-01-25T12:15:26Z 最近のFacebookの広がりを考えると、ブログのコメント欄もFacebookコ... takayuki という訳でコメント欄をFacebookコメントに変更してみました。
対応はとても簡単。以下の手順です。


●１、Facebook Commentsページにアクセス
----------------------------------------------------------------------------------------------------
http://developers.facebook.com/docs/reference/plugins/comments/


●２、コメント欄の設定
----------------------------------------------------------------------------------------------------
・URL
・記事表示数
・幅
・カラー

を設定し、コードを取得。
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments
href="<$mt:EntryPermalink$>" num_posts="20" width="525"></fb:comments>


ブログに設置するには、記事個別にアドレスを取得する必要があるので
href="***" 部分をそれぞれテンプレートタグに変更します。

【MovableTypeの場合】　ＭＴタグの<$mt:EntryPermalink$>を入力。
【Wordpressの場合】　WPタグの<?php the_permalink(); ?>を入力。


この修正コードをテンプレートに埋め込めばＯＫです。




]]> 【まとめ】ソーシャルボタン設置方法（Facebook、twitter、google+1、はてな、Evernote） tag:lala-rockets.com,2012:/blog//1.118 2012-01-17T12:50:59Z 2012-01-17T12:57:13Z 最近は設置するのが当たり前になっている各種ソーシャルボタンですが、ちょっと作業し... takayuki ちょっと作業していないと「あれ？」と忘れてしまう事もあります。
そんな時はこのまとめサイトで確認です。


●「Facebookいいね！ボタン」をホームページやブログに設置

●twitter「ツイートボタン」をホームページやブログに設置

●google+1ボタンをホームページやブログに設置

●「はてなブックマーク数＆登録ボタン＆ランキング」をホームページやブログに設置

●Evernote（エバーノート）のクリップボタン（サイトメモリー）をホームページやブログに設置


※各インターフェイスは常に進化しますので変更されている場合があります。

]]> カメラを持って散歩しませんか？「散歩の収獲　赤瀬川原平」 tag:lala-rockets.com,2012:/blog//1.117 2012-01-15T14:14:14Z 2012-01-15T14:53:57Z 「カメラと歩くと、人は現代人から狩猟採集民にさかのぼる」という赤瀬川さんの言葉の... takayuki
「カメラと歩くと、人は現代人から狩猟採集民にさかのぼる」という赤瀬川さんの言葉の通り、カメラを持っての散歩は普段気にも留めない場所をカメラで狙い、次々とシャッターを切る。まさに獲物を狙いさまよい歩くといった感じです。

この本はそんな「カメラ散歩」に火をつけてくれる一冊です。
写真はもちろん、タイトルの付け方や説明も素敵。





]]> Wordpressマルチデバイス対応～携帯＆スマートフォンサイト構築＆カスタマイズ～ tag:lala-rockets.com,2011:/blog//1.116 2011-12-15T12:53:06Z 2011-12-15T13:05:06Z Wordpressでのサイト構築が多い中で、無料で簡単にマルチデバイス対応できる... takayuki

【スマートフォン対応】
--------------------------------------------------------------------------------------------
●スマートフォン変換プラグイン
WPtouch
https://wordpress.org/extend/plugins/wptouch/

無料で簡単！Wordpressをスマートフォン表示に変換してくれます。
基本インストールだけでも十分と思いますが、カスタマイズしたい方は
以下サイトにて方法が紹介されています。
デフォルトではトップページが記事一覧になってしまいますが、
カスタマイズした固定ページをトップにもってくる方法など、とても勉強になります！

★スマートフォンWPtouch トップページのカスタマイズ | 簡単ホームページ作成支援-Detaramehp




【携帯対応】
--------------------------------------------------------------------------------------------
●携帯サイト変換プラグイン
Ktai Style
http://wordpress.org/extend/plugins/ktai-style/

こちらも無料プラグインにてWordpressを携帯サイト表示に変換してくれます。
基本状態の場合は、デザイン的にはちょっと厳しい状態ですが、
こちらもテンプレートをカスタマイズする事で、デザインする事が可能です。
以下サイトにてカスタマイズ方法が紹介されています。

★WPのKtai Styleで携帯サイトのデザインをする方法 - [Mu]ムジログ





早くカスタマイズのスキルを習得して見栄え良くＰＣ，携帯、スマートフォン同時メンテナンスを実現したいものです。



]]> たった10秒で作れるFacebook用ウェルカムページ！ 「ウェルカムページ メーカー 」 tag:lala-rockets.com,2011:/blog//1.115 2011-12-07T12:56:32Z 2011-12-07T13:04:17Z 通常Facebook用ウェルカムページを制作するには、●開発者ページhttp:/... takayuki
●開発者ページ
http://www.facebook.com/developers/

からアプリケーション作成を行う必要がありますが、これが結構面倒...。
なんかインターフェイスもコロコロ変わるので苦戦しました。



しかし単純に画像を貼ったウェルカムページで良い場合は
---------------------------------------
●ウェルカムページメーカー
http://welcome-page.jp/
---------------------------------------
が非常に便利です。１分もあれば設定可能です。

しかも「いいね前」「いいね後」で表示画像を切り替えもできちゃいます。
今後は画像ファイルだけではなく、HTMLソースにも対応してもらえたら泣いて喜びます^^


そんな「ウェルカムページメーカー 」で私のFacebookページもウェルカムページを設定してみました。どうぞ試しに「いいね！」をクリックしてみてください～...。

↓こちら
http://ja-jp.facebook.com/LALAROCKETS ]]> WordPress連続改行 適用プラグイン「PS Disable Auto Formatting」 tag:lala-rockets.com,2011:/blog//1.114 2011-12-06T12:29:02Z 2011-12-06T12:37:24Z WordPressを初期設定のまま使用していると、入力画面で改行スペース調整して... takayuki 記事を公開してみると、改行スペースがまったく反映されないという問題があります。

そんな時はWordPress の改行適用プラグイン「PS Disable Auto Formatting」がオススメです。
１分もあれば設定完了出来るお手軽プラグインです。


------------------------------------------------------------------------------------------------------------------
●PS Disable Auto Formatting
http://wordpress.org/extend/plugins/ps-disable-auto-formatting/

★１．
WordPress の「プラグイン」から「新規追加」を選び、検索欄に
「PS Disable Auto Formatting」を入力してプラグインを検索すると表示されます。

↓

★２．
表示されたプラグインをインストールします。
インストール時にサーバーのFTP情報入力が必要ですので準備ください。

↓

★３．
インストールが完了し「有効化」すると、
WordPress の「設定」メニューに「自動整形」が追加されますので、
これで作業完了となります。

※自動整形の「記事の自動整形」の停止にチェックが付いていれば、改行スペースが反映されます。
------------------------------------------------------------------------------------------------------------------

便利プラグインですね^^




]]> 【デザインアイデアの宝庫】招待状デザインアイデア集 tag:lala-rockets.com,2011:/blog//1.113 2011-11-17T16:08:42Z 2011-11-17T16:23:22Z 招待状という限られたスペースでどの様なデザイン表現ができるのか。。。デザイン、素... takayuki 招待状という限られたスペースでどの様なデザイン表現ができるのか。。。
デザイン、素材、特殊印刷、様々なアイデアを見ているだけでなぜか幸せな気持ちになります^^


]]> google+1　ボタン設置方法　～ワードプレス、ムーバブルタイプ～ tag:lala-rockets.com,2011:/blog//1.112 2011-11-16T12:58:30Z 2011-11-16T13:16:22Z 最近は「google+」を利用される方も増え、「google+1」ボタンの設置機... takayuki

コード生成は簡単。以下サイトにて取得します。

●プラスワンボタン
http://www.google.com/webmasters/+1/button/index.html


google1.jpgこのページで
--------------------------
●サイズ
●カウンター表示
●対象ＵＲＬ
--------------------------
等を設定します。


コードは以下の通り、２か所に設置
------------------------------------------------------------------------------
<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone size="medium" href="xxxxx"></g:plusone>
------------------------------------------------------------------------------

href="xxxxx"部分に
【MovableTypeの場合】　ＭＴタグの<$mt:EntryPermalink$>を入力。
【Wordpressの場合】　WPタグの<?php the_permalink(); ?>を入力。
と記事ＵＲＬ取得タグを入れればブログ記事一覧画面でも、各記事のＵＲＬを取得可能です。








]]> スクール・オブ・グラフィックデザイン―デザインと仕事、108のコツ。 school of graphic design tag:lala-rockets.com,2011:/blog//1.111 2011-11-14T15:36:27Z 2011-11-14T15:58:03Z デザインや仕事に関する「そうだよなぁ～」と考えさせられる基本ポイントが満載で、初... takayuki

デザインや仕事に関する「そうだよなぁ～」と考えさせられる基本ポイントが満載で、初心を忘れないように定期的に見直したいと思わせる一冊でした。


著者それぞれで違う意見もあり「こうしなさい」といった事例集ではなく「事の本質を意識する大切さ」を気付かせてくれます。



 
]]> ミクロ・コスモス―Designs and Patterns　-秋山実さん- tag:lala-rockets.com,2011:/blog//1.110 2011-05-26T11:49:51Z 2011-09-24T08:11:44Z 自然が織りなす幻想の世界。普段生活している中で普通に存在する様々な物質。そこへ焦... takayuki そこへ焦点をあてクローズアップしていくと、そこにはもう一つの世界があるのですね。
干渉色で彩られた様々なデザイン＆パターンは見ていて飽きません。

実際の顕微鏡で見る事ができたら、偏光フィルターを触りながらミクロの世界に入り浸りそうです...。
]]>
「凝視しても見えない小さな点の中にも、美しい抽象の世界があり、しかもミクロとマクロの形がどこか似ている。ミクロの世界を見ていると、宇宙とか大地を連想させる形に出会う事が多い」

という部分は考えさせられます。
宇宙の大規模構造が脳の構造と似ているとか...。秋山さんのいう通り万物は宇宙の統制の中にあるのかもです。


科学と芸術の接点にあるといわれる顕微鏡写真。
新たな刺激を与えてくれる写真集でした。






]]> WEB制作の打ち合わせをスムーズに進める７つのポイントおさらい。 tag:lala-rockets.com,2011:/blog//1.109 2011-05-17T12:18:47Z 2011-09-24T08:13:52Z ＷＥＢサイト構築にあたり、クライアント様との打ち合わせがスムーズに進むかどうかは... takayuki
デザイナーがクライアント様と直接打ち合わせを行う機会は多いと思いますが、「そんな頻繁に外にでないし経験も少ないから苦手だなぁ」というデザイナーさんへ、自身への反省や基本再確認も含めて、打ち合わせをスムーズに進めるポイントをまとめました。

]]> 打ち合わせの前に。
-------------------------------------------------------------------------

●１．事前準備をしっかりと。初回打ち合わせ前にクライアント様と情報共有を。
「詳細は打ち合わせ当日に話しましょう」となるパターンも多いと思いますが、出来るだけ打ち合わせ前にお互い情報共有する事が、当日の打ち合わせをスムーズにしてくれます。

初回打ち合わせなら、事前にヒアリングシートを送付しておくだけでも、打ち合わせ当日にはある程度の回答が得られますし、打ち合わせの目的や確認事項を事前に連絡しておく事も重要です。

また同業ライバル企業のサイト状況等、事前にクライアント様で検討できるような資料も合わせて送付するとより親切です。




●２．質問したい事を事前にまとめておく。そして一度「頭の中でシミュレーション」を。
クライアント様の問題解決を目的に、要望をお話いただくのですが、それだけでは単なる御用聞きになってしまいます。そこで気になった事、わからない事は打ち合わせ当日に恥ずかしがらずに質問し、話の内容を深く掘り下げていきます。これらをスムーズに進める為にも、事前に「頭の中でシミュレーション」しておく事をお勧めします。

●新規制作やリニューアルの話が上がったきっかけ。
●最重要目的。
●改善したい問題点。
●その業種・業界（ライバル社）の動向。
●その企業様の特徴。
●現在の客層、拡大したい客層。
●ＣＭ・雑誌・チラシ等の各種メディアでの広告展開について
●実店舗で展開されている広告ツール。
●見本・参考にしたサイトを選んだポイント。

など、ホームページ制作以前の、業界や企業様自体を知ることが重要ですので、質問を繰り返しクライアント様の現状を把握していく過程を思い描きます。

この様に現状把握を行う事で、ＷＥＢを含めたメディアでどんなアプローチが出来るか提案をまとめやすくなります。ここは常日頃からアンテナを張ってないといけませんね^^;

緊張してしまう方は、この様に事前に質問したい事をまとめておき、頭の中で打ち合わせをシミュレーションしておくと気持ちが非常に楽になります。



-------------------------------------------------------------------------
打ち合わせ当日
-------------------------------------------------------------------------

●３．顔合わせ。まずは第一印象を良く。
クライアント様との初対面時の印象で、以後の関係が大きく左右されます。
吉原 珠央さんの著書【「また会いたい」と思われる人の38のルール】でも記載されておりましたが、どんなに実力のある人物でも、ぼさぼさの頭、しわしわのシャツ、よごれた靴で小声の挨拶で登場されては不安がよぎるものです。清潔感のある格好で通る声での挨拶を心がけます。

また「本日はお時間をいただきありがとうございました」等、まず感謝の気持ちを伝える事も大切です。
↓
第一印象を良くする事で以後の話の説得力に違いが現れます。





●４．打ち合わせ目的を共有。冒頭に「打ち合わせの流れ」「確認事項」を説明。
プレゼンの冒頭と同じく、今日の打ち合わせは
「どういう進め方をして、何を確認するのか」
をはっきりさせます。
また終了時間も宣言しておくと時間を有効に使う意識が現れます。
こうする事で参加者の意思統一を図る事ができ、時間だけ費やして何も決まらない打ち合わせになるという事を回避できます。
※ここで上記１の確認事項の事前送付などを行っていると、当日の話がスムーズなのです。





●５．デザインは理論的に詰めていき、お互いの着地点を見つける。
打ち合わせ当初は「クールで情報を絞ったかっこいいサイトにしたい」と感覚で言われていた担当様も、お話を伺い、質問や提案を重ねる事で、理論的にデザインやサイト構成を詰めていく事ができ、
「自社ブランドやターゲットを考えると、ナチュラルテイストで情報を充実させた方が効果が期待できる」
という様に、当初とまったく違ったビジュアルコンセプトになる事があります。

ここはサイト制作を請け負う側の責任でもありますので、クライアント様の意見も尊重しつつ、事の本質を引き出す事を心がけます。※提案の押しつけにならない様に注意です。

デザイン確認で何度も何度もデザインのやり直しになる場合があるかと思いますが、
それは「かっこいい」「かわいい」「好き」「嫌い」など、担当者の感覚だけで打ち合わせを進めてしまうと発生しやすい問題です。デザインの背景をクライアント様と共有し、どういう理由でこのデザインになっているのかを理解して頂く事も重要です。
※もちろんビジュアルのクオリティも重要です^^





●６．ＷＥＢ制作の進行内容をしっかり分かりやすく説明する。
ＷＥＢ制作に慣れてらっしゃるクライアント様なら、納品までの流れや専門用語も理解されている為、問題ないのですが、ＷＥＢ制作委託に慣れていないクライアント様には、ＷＥＢ制作の進行について分かりやすく説明を行います。

特にＷＥＢの場合は完成間近にサイト構成に大きな変更依頼が入ると、コスト、納期的にも致命的なダメージとなりますので、その点をしっかりと説明し理解いただく事が重要です。
私はサイト制作を「家つくり」に例えて説明し、初期のコンテンツ設計、デザインの確定がどれだけ重要かを説明します。


★どういったサイト構築方法にするか
形の決まったテンプレート利用のローコスト規格住宅型サイト？
完全自由設計の注文住宅型サイト？


★サイトコンテンツ構成は住宅の間取り図。最初の設計が重要。
家を建てる時は
---------------------------------------------------------------
・1.ライフスタイルから住宅コンセプトを決める
・2.予算を決める
・3.間取りを決める
・4.デザイン（外観や内装）を決める
・5.オプション装備を決める
↓
以後の変更対応は基本的に不可。（変更には別途料金と納期の見直しが必要）
↓
・6.工事着工
・7.完成＆最終確認
・8.引き渡し
---------------------------------------------------------------

といった流れとなりますが、ＷＥＢ制作にも当てはまります。

---------------------------------------------------------------
・1.ホームページを活用してどの様な問題解決を行いたいかコンセプトを決める
・2.予算を決める
・3.サイト構成（コンテンツ）を決める
・4.デザインを決める（デザインカンプにて）
・5.オプション（更新機能等のシステム制作、FLASH、ソーシャルメディア連携、等）を決める
↓
以後の変更対応は基本的に不可。（変更には別途料金と納期の見直しが必要）
↓
・6.制作開始。（コーディング＆システム）
・7.完成＆最終確認
・8.納品
---------------------------------------------------------------


家を建ててから間取りを変更したり部屋を追加するのは、もう一度最初から家を建て直すのと同じ位労力が必要となりますが、ＷＥＢサイト制作も同じく、完成間近でのコンテンツ追加や削除、コンセプトの変更は、もう一度サイトを作り直すのと同じ位の労力がかる事を説明し、完成間近での変更には大きな費用と労力がかかる事を理解していただき、ステップ毎にしっかりとクライアント様に確認をして頂きます。




●７．お金の話。見積りの根拠を具体的に説明する
WEB制作の見積りはほとんどが人件費の為、「１ページ○○円」「一式○○円」や「○人日○○円」といった見積り表示が多くなってしまいます。
以前「なぜ見積りに端数なくどんぶり勘定みたいな金額なんですか？」と質問を受けた事がありましたが、その時は「作業にかかる想定時間は○○時間で、スタッフの作業費は１時間○○円での算出となっている為その金額なのです」と、同業他社様の見積りサンプル（ＷＥＢに公開されている見本）と合わせて、金額の根拠を説明し、ご理解いただきました。

特にシステム制作等、表に見えない作業についてはクライアント様も提示金額が高いか安いかの判断が難しい為、実際に行う作業の詳細説明や他社金額例も含めて、できるだけわかりやすい説明を心がけます。




●おまけ．仕事以外のお話でより担当様を知る。
仕事の話がまとまり、区切りがついた時など、クライアント様との距離を縮める為にも、プライベートな事などお話します。
腕時計の事やかばんについているキャラクター、趣味、スポーツの話等、気付いた事をきっかけにお話しする事で、仕事とは違った担当様の一面を感じる事ができます。
良い意味で距離を縮める事ができますので、今後の仕事の進行にもプラスになります。





以上、ほとんどあたりまえの事ばかりですが、打ち合わせをスムーズに進める人ほど、その場の話術ではなく、しっかりとした事前調査、シミュレーションを行って誠意をもって打ち合わせに臨んでいるものです。
自分自身、より最適で魅力的な提案が出来る様に精進したいと思います。






]]> 【まとめ】便利な写真素材サイト12 〜商用利用無料〜 tag:lala-rockets.com,2011:/blog//1.108 2011-05-16T15:35:57Z 2011-09-24T08:12:54Z 素材の無いデザイン制作時にとても助かる商用利用OKな写真素材サイトのまとめです。... takayuki 素材の無いデザイン制作時にとても助かる商用利用OKな写真素材サイトのまとめです。
個人的利用頻度に応じて★マークをつけています。
※写真のクオリティはどのサイトも素晴らしいです。

]]>

★★★★★
●写真素材 足成【フリーフォト、無料写真素材サイト】
商用利用も無料で著作権表記やクレジット表記も不要。

★★★★★
●モデルピース
人物写真が豊富にそろってます。
商用利用も無料で著作権表記やクレジット表記も不要。

★★★★
●無料 写真素材・フリー画像素材のリンクスタイル
雑誌・出版業界や広告業界などで活躍しているプロカメラマンが撮影した高解像度の写真を無料でフリー画像素材として公開しています。 
商用利用も無料で著作権表記やクレジット表記も不要。

★★★
●無料素材 - BEIZ Graphics Web
風景イメージが豊富。
商用利用も無料で著作権表記やクレジット表記も不要。

★★★
●無料の写真素材（商用利用可能）-ActivePhotoStyle
風景イメージが豊富。
商用利用も無料で著作権表記やクレジット表記も不要。

★★★
●2000ピクセル以上のフリー写真素材集
風景イメージが豊富。
商用利用も無料で著作権表記やクレジット表記も不要。

★★★
●igosso画像検索 : 無料で商用利用可能なフリー素材/写真
無料で商用利用可能なフリー素材をflickrから検索するサービスです。

★★★
●ペイレスイメージズ　フリーイメージ
メンバー登録(無料)を行うと数千点の写真やイラストから1日5点までフリーイメージをダウンロード可能。



ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
海外



★★★★
●Free Stock Images
ハイクオリティなテクスチャーイメージの多いフリーストックフォト

★★★
●stock.xchng
掲載点数がすごい。


★★★★★
●majesticimagery.com
クオリティの高い写真が豊富です。ステキ。

★★★★★
●morgueFile free photos for creatives by creatives
こちらもクオリティの高い写真素材が豊富です。





]]> Evernote（エバーノート）のクリップボタン（サイトメモリー）をホームページやブログに設置する tag:lala-rockets.com,2011:/blog//1.107 2011-05-06T10:31:02Z 2011-11-15T12:42:47Z ブログ記事にエバーノートのアイコンが付いていて、そこから記事をクリップできる様に... takayuki ブログを目にする事が多く、気になっていたので実装してみました。

組み込みは簡単！下記エバーノートのサイトメモリー解説サイトにて
コードを生成してブログテンプレートに組み込むだけ。
クリップするスタイルや範囲も自由に変更可能です。

●Evernote　サイトメモリーって何？
http://www.evernote.com/about/intl/jp/developer/sitememory/


またWordPressを使用している方は便利なプラグインもありますのでお試しください。
WP Evernote Site Memory 

]]> ]]> ブログやflickrの更新情報をツイッターに反映。FeedTweet (フィードツイート) tag:lala-rockets.com,2011:/blog//1.106 2011-04-27T13:06:26Z 2011-09-24T08:13:15Z FeedTweet (フィードツイート)http://feedtweet.am6... takayuki http://feedtweet.am6.jp/

簡単３ステップで利用可能です。

・フィードツイートに登録
・ツイッターアカウント登録
・ブログ登録＆flickr登録＆・・・
これだけです。

便利ですね！
]]> ＭＴ４　コメントフォームを表示させる設定 tag:lala-rockets.com,2011:/blog//1.105 2011-04-27T13:01:25Z 2011-09-24T08:15:34Z 昔ＭＴ４をいじってたらなぜかコメントフォームが消えてしまいました。そのまま数年放... takayuki そのまま数年放置していたのですが、久々にネットで調べてみたら解決策が掲載されていました！
感謝です。

内容は
●ブログ設定の「登録/認証」で認証方式を「認証なしコメント」にチェックをいれる。
だけでした・・・。

しかし僕の場合、これでも表示されなかったので、その下のMovable Type にチェックを入れたら
無事表示されました。深くは理解してませんが解決ということで調査打ち切りです^^

]]>