ahkslog

Facebook「いいね!」ボタンのエラー

2012-01-23T13:00:00.000+09:00

今さらな感じですが、先日初めて
サイトに「いいね！」ボタンを付けてくれという依頼を受けました。
その際、エラーが出たりして結構苦しんだので、後のためにメモっておきます。
（Facebookはよく仕様が変わります。こちらは2012年1月現在の情報です。）

まずはFacebookの開発者ページからコードを取得。
「Step 1 - Get Like Button Code」の部分は
URLを入力して、ボタンの外観を決めるだけなので簡単です。

問題は次の
「Step 2 - Get Open Graph Tags」

こちらで、誰かが「いいね！」ボタンを押した時に
Facebookのウォールに表示される情報を設定します。
口コミ効果を狙ってボタンを設置する場合には重要。

Title
→リンクのタイトル
Type
→「いいね！」したコンテンツの種類
URL
→リンクさせるURL（好きなページに誘導できます）
Image
→ウォールに表示される画像（口コミ狙う場合にはこれが最重要！と言われました）
Site name
→サイト名
Admin
→？？？

「Admin」って何？
読むと、管理者のFacebookアカウントIDか、アプリケーションのIDと書いてあります。

自分のFacebookのページのURL
（http://www.facebook.com/#!/profile.php?id=）
の最後の数字部分がアカウントのIDです。
※Facebookインサイトの「ウェブサイトのインサイト」
っていうボタンからも確認できました。

アプリケーションIDの場合は、
Facebookのアプリページから作成するみたいです。

最初、なくてもいいやと思ってAdminを入れずに設置してみました。
すると、いいね！ボタンをクリックすると
横に「エラー」と出てしまい、ウォールには反映されるけれど
「＊人がいいねと言っています」などの表示が出ず、
もう一度アクセスするとまたボタンを押せてしまいます。

Facebookのデバッガー（以前はURLリンターという名前だったようです）
からデバッグしてみると、やはり Admin IDがないというエラー内容。

仕方なくAdminに適当なアカウントIDを入れてみましたが、
なぜかまだエラー。
困って調べてまわっていたら、修正が反映されるまで
「数日かかる」
という情報を発見。
あきらめて1日待ってみたところ、無事にエラーが消えました！

あと、本当は1ページに複数のボタンを置きたかったのですが、
Open Graph Tagsを使う場合は、
metaタグなので1ページに1種類しか設置できないようです。
（※いっぱいページ作ってリダイレクトとか頑張ればなんとかなります。）

簡単かと思っていたら、たっぷり時間を取られてしまった
「いいね！」ボタン設置でした。
難しいですね、Facebook……

食べ物の写真を上手に撮りたい

2012-01-22T14:41:00.000+09:00

仕事で作っているサイトが食品を扱っているため、
最近よくお料理の写真を撮っています。

一応デジタル一眼レフを使っているけど、
どうも上手に撮れないなぁ…と思っていたのですが、
ある時
「本とか読んで勉強すればいいんだ！」と気づき、
図書館でいっぱい借りてみました。

私の撮りたい写真は、普段の食事のシーン。
調べてみたら、そういうのは「テーブルフォト」って言うんですね。

以下、読んだ本。

[デジタル一眼レフ] 手軽できれいなテーブルフォトの撮り方教えます
構図の決め方など、たくさんの写真で説明されていて
非常に勉強になります。
この本は唯一、自然光じゃない時の撮り方が載ってました。貴重。
（夕食の写真を撮りたいんです…）

テーブルフォトの撮り方きほんBOOK ~料理、雑貨、花をステキに撮る。~
自分の家で上手にテーブルフォトを撮る方法が
基本的なことから載ってます。

かわいい写真の撮り方手帖 ~あなたの“好き”を撮ろう~
カメラマンやブロガーさんたちの撮った写真が
「こうやって撮りました」の情報付きで紹介されてます。
かわいいです。

※まだ勉強中なので、また読んだら追加します！

今のところ、学んだことは

できる限り自然光で撮る。
ななめ後ろからの逆光が基本。
いちばん大事なのはテーブルセッティングかも…

です。

食器やテーブルクロスなどの背景と、
料理をどれだけきれいにおいしそうに盛りつけるかが
写真の出来を大きく左右するんだな〜、と
写真技術以前の部分に気づいてしまいました。
これは自分のセンスを磨くしかないですね。

あと同じテーマの本をいっぱい読むと、

作例をとにかくたくさん見られる
撮る人ごとに小さいコツやテクニックを持っているので、ネタが増えておもしろい

のでとってもおすすめです！

スクロールしてもついてくるナビゲーション

2011-07-22T22:09:00.008+09:00

仕事で使ったので、メモ。

長〜いページをスクロールしても、
するっと動いてくっついてくるサイドナビゲーション。
フローティングメニュー、エレベーターメニュー、スクロールメニュー
などと呼ばれているみたいです。

jQueryを使っているサイトだったので、jQueryで探してみました。

最初に、
Open Source - Scroll Follow - The Kitchen @ Net Perspective
こちらのプラグインを使ってみたのですが、
jQueryのバージョンのせいか、うまく動きませんでした。

そこで、次はこちら。
Creating a Floating HTML Menu Using jQuery and CSS | Nettuts+
ちゃんと動きました。
…でもIEはダメだった。（ひとまずIEは保留！）

設置の仕方。

jQueryを読み込んで、

<script language="javascript" src="jquery.js"></script>

以下のソースを書く。
#floatMenu がフロートするDIVの名前です。

<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () { 
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
}); 
</script>

IEどうするか考えなきゃ…

「section」と「article」

2011-07-03T10:34:00.001+09:00

HTML5について読んでいたら、
「section」と「article」の違いがよくわかりません。

それで調べてみたんですけど、
超かんたんに言うと…

article＝それだけで独立している（意味のわかる）かたまり
1ページに記事が複数あるような場合はそれぞれ<article>で囲う

section＝見出しがあるかたまり
section内にHeaderやFooterがある場合もあり
HTML5以前の<div id="">に近い使い方？

div＝意味のないただのかたまり（デザイン的な利用など）

ってことなんでしょうか。
うーん、合ってるのかな？

これに関する情報は内容がそれぞれ微妙に違っていて、
HTML5がもっと普及してきたら業界内統一見解ができるのかな〜
などと思いました。
とりあえず社内では統一しておく、とかいうレベルな気がしてきた。

HTML5、実際に仕事ではまだ使わないけど、
そろそろ人に聞かれた時に答えられるくらいには
なっておかないとなぁ……

HTML5.jpの「article要素」定義
http://www.html5.jp/tag/elements/article.html

HTML5.jpの「section要素」定義
http://www.html5.jp/tag/elements/section.html

「ネイチャー・センス展」と「これも自分と認めざるをえない展」

2010-07-25T17:23:00.011+09:00

どちらも六本木でやっていたので、同じ日に行ってきました。
MORI ART MUSEUM [ネイチャー・センス展]
21_21 DESIGN SIGHT-「これも自分と認めざるをえない展」

「ネイチャー・センス展」の方は、天井が高くて広い空間に、自然をテーマにした大きな作品がゆったり展示してあるのがいい感じでした。
「“これも自分と認めざるをえない”展」は、見たあとで種明かしをされるような作品が多くて、色々おもしろい体験ができました。
残念だったのは、機械の調整中のものがあったり、一人ずつ体験するインスタレーションが行列していて（40分待ちとか…）全部を見られなかったこと。空いている時にもう一度行きたいなぁ…。

最近は絵画や写真の展覧会ばかり行っていたので、久しぶりの現代アートでした。
おもしろかった！

次は
東京都現代美術館「こどものにわ」
ICCキッズ・プログラム 2010「いったい何がきこえているんだろう」
の2つにも行きたいけど、終わる前に行けるかな？

翼のベクターイラスト

2010-07-23T12:44:00.000+09:00

これは使えそう！
たくさんの翼（羽）のイラストがベクター形式でダウンロードできます。

「free for personal & commercial purposes」
とありますので、商用利用も可能みたいです。

ダウンロードはこちらのページのリンクから。
Download Vector Wings

MacでIEを使う方法

2010-07-20T20:25:00.000+09:00

Windows用のアプリケーションを、スタンドアローンで動くMac用アプリにしてIntel Mac上でふつうに動かせるらしいのです。
How to Easily Run Internet Explorer on Your Mac

「WineBottler」というフリーソフトを利用します。
WineBottler - Run Windows Programs directly on OS X

IE6やIE7での表示をチェックできるサービスはいろいろありますが、やはりちゃんと動いている方がいろいろ確認できますよね。
あとで家のMacで試してみます！

参考：
『WineBottler』でWindowsのプログラムをスタンドアローン化し、OS Xアプリに : ライフハッカー［日本版］
MOONGIFT: » Windows用ソフトウェアをあたかもMac OSXソフトウェアのように変換する「WineBottler」

jQueryのかっこいいメニュー＆ページスクロール

2010-07-14T22:57:00.000+09:00

いい感じのjQueryプラグインを見つけたのですが、使う機会がなさそうで残念……なので、メモっておこうと思います。
どちらもかっこよくて気持ちのいいアニメーションです。
どこかで使ってみたいなぁ。

こちらはナビゲーション。

Awesome Cufonized Fly-out Menu with jQuery and CSS3 | Codrops
（デモ）
テキストの表示はcufonを使っています。

こちらはページ切り替えです。

Smooth Vertical or Horizontal Page Scrolling with jQuery | Codrops
（デモ：Horizontal/Vertical）
縦の動きと横の動きの2種類。
切り替え時の画像をカラフルなものに変えてもおもしろそう。

電子書籍を作ってみる！

2010-07-06T20:04:00.000+09:00

最近話題の電子書籍。
一応“Web”デザイナーとはいえ、わからないではすまない日がすぐにでも来そうな感じですね。
とにかく1回作ってみようと思って調べてみました。

AppleやGoogleが採用しているEPUB形式というフォーマットで作ってみることにしました。
基本的にはXHTML＋ZIPらしいのですが、じぶんで書くのはちょっと難しそう……。
（参考：日本語Epubブックサンプル - 横浜工文社）
InDesignで書き出せるらしいので、デザインのクオリティ等を求めるならこれが一番良いのでしょうが、新しいバージョンを持っていないので×。
オープンソースの変換ツール、
calibre - E-book management
が良さそうです！無料だし。
（参考：デザインのブログ iPadやiBooks待てないよ。電子書籍リーダーで読んで、今日からあなたもEPUB形式作成で電子出版？CS5）

では実験。

元になるテキスト（XHTML）を青空文庫で拾ってくる。
calibreに読み込む。
lang="en"をlang="ja"に修正。（参考：EPUBで遊ぶ！）
iBooksやStanzaで表示させてみる。

細かい設定とかいじらなくても、無事見られました。意外とかんたん！
表紙だけ文字化けしちゃいましたが、JPEG画像なので自分で作れば大丈夫なんじゃないかと。
あと青空文庫から取ってきてそのまま使ったせいか、ルビが変でした。

次の実験。
sigilでもやってみます。
こちらは画像を入れたり、WYSIWYGで書籍を編集することがでるソフトです。
（参考：月曜ジャーナル Sigilの基本的な使い方（１））

元になるテキストをSigilに入力。
目次を作ったり画像を入たりする。
テキストの先頭に表紙になる画像も貼り付け。
保存する。
iBooksやStanzaで表示させてみる。

こちらも簡単でした！
iBooksでは表紙が出ませんでしたが、iTunes上でアートワークを追加できます。

こちらが作ったEPUBをiPhoneのiBooksで表示しているところです。

EPUBファイルを作るだけなら、ほんとに簡単です。
本の中身さえあればいつでも出版できてしまいますね！

ブラウザで読めるかわいいデザイン雑誌

2010-06-29T12:39:00.000+09:00

かわいいです♪

Issuu - uppercaseyyc - Documents

Webデザイナーのためのポータブルアプリ

2010-06-08T13:37:00.001+09:00

先日、家のネット回線が半日止まってしまって焦りました……。（iPhone持っててよかった～）
回線も困りますが、家のMacが急に動かなくなったらもっと困るなぁと時々考えてしまいます。もちろん会社のWinもですが。
そんな事態に備えて、使っていないUSBメモリにポータブルアプリを準備しておくっていうのはいいかもしれない！と、この記事を見て思いました。
12 Portable Apps for Web Designers

これなら非常時に家族のノートPC使ってお仕事ができる♪
早速メモ！

KompoZer Portable
DreamweaverっぽいHTMLエディタ。良くはないけどNotepadよりましでしょ！だって。
Firefox Portable Edition
ブラウザ。
XAMPP Portable
ローカルサーバ。CMSとかの動作確認用ですよね。
GIMP Portable
Photoshopのかわりに。
AMP Font Viewer
フォント管理。
7-Zip Portable
アーカイバ。ZIP, RAR, TAR, GZ他。
PhotoFiltre
レタッチアプリ。クロップやリサイズなど、GIMPより軽い。
Inkscape Portable
Illustratorのかわりに。
AbiWord
Word（.doc）ファイルのエディタ。OpenOffice Portableより軽い。
PicPick Tools
スクリーンキャプチャやカラーピッカーなど。
MobaPhoto
イメージファイルの管理。Picasaもおすすめ。
ToDoList
ToDoリスト。

Twitterのアイコンつくりました。

2010-02-26T21:10:00.000+09:00

探してもあんまりシンプルでかわいいものがないな～と思って、Twitter用のリンクアイコンを作ってみました。せっかくなので公開。
フリー＆商用利用可としておきますので、もし気に入ってくださったら、ご自由にお使いください。（コメントしてくれると喜びます！）
データは透過PNGです。鳥に白フチついてます。

ダウンロード

Mac OS Xの裏技

2010-01-30T20:58:00.006+09:00

TheAppleBlogに載ってたOS Xの裏技。
OS X Hidden Gems
知らないものが多かったので自分用にメモ！
こういうの知っていると作業効率が全然違ってきますから、積極的に覚えていきたいです。

作成中のファイルをセーブしていない時は、ウィンドウを閉じる赤いボタンの中に黒い丸が出ている。
ファイルを保存する時、キーボードの「/」を押すと保存先のフォルダを選ぶダイアログが出る。
移動したいフォルダのパスを入力するとそこに移動。
Shift＋Control＋イジェクトキーでディスプレイのスリープ。
メニューバーのAirMacアイコンをクリック。プルダウンメニューを出している時にOptionキーを押すと、通信速度付きで接続先を一覧表示。
ファインダーで、Controlキーを押しながらフォルダ名の頭のアイコンをクリックすると、上の階層のフォルダがプルダウン表示されて移動できる。
Control ＋ Option ＋ Command ＋ 8 で、モニターのカラー反転。
SafariやMailで、単語を選択して Control ＋ Command ＋ D を押すと、辞書を起動してその場に表示。
（日本語なら国語辞典、英語なら和訳を表示しました。）

何となく知ってても、いざとなると肝心なショートカットを忘れちゃうんですよね〜。
自分で一覧作ってプリントアウトしておこうかなぁ。

PhotoshopでFaviconを作る

2010-01-26T14:21:00.008+09:00

たまに必要になって、その度に調べてる気がする「Favicon（ファビコン）」について、メモっておくことにします！

Faviconを作る

Faviconは.GIFや.PNGでもいいのですが、IEが.ICOじゃないとダメみたいなので、ICOファイルで作ります。

私はPhotoshopでアイコンを作るので、プラグインを使ってそのまま書き出してしまいます。
プラグインのダウンロードはこちらから。
Telegraphics - Free plugins for Photoshop & Illustrator...and other software

「ICOFormat.8bi」というプラグインファイルを、Photoshopの「プラグイン」＞「ファイル形式」フォルダに入れておくと、「別名で保存」のプルダウンメニューからICO形式を選べるようになります。
ちゃんと透過アイコンもできます。

※マルチアイコンにしたかったらこんなのも。
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。

サイズはマルチアイコンの場合、16×16、32×32、64×64（MacOSX用）、128×128（MacOSX用）。
マルチにしない時は16×16で大丈夫そうです。

設定の仕方

＜head＞内で指定します。

<link rel="shortcut icon" href="ファイル名" />
<link rel="icon" href="ファイル名" type="image/vnd.microsoft.icon" />

『image/vnd.microsoft.icon』っていうのが .icoファイルのメディアタイプです。

表示されないとか更新されないとか不具合が起きやすいので、＜link rel=～＞の前に

<script language="JavaScript">
var image = new Image()
image.src = "ファイル名"
</script>

と書いておくと良いらしいですよ。

ブラウザで確認して完成です！

Timesが選んだベストデザインブログ50

2009-12-17T15:06:00.002+09:00

これ、かなりツボです。
50 of the world's best design blogs - Times Online
クリスマス前なのでギフトやインテリアの参考に…ということらしく、かわいい雑貨やインテリアのブログがたっぷり50個載ってます。

知っているブログも多かったのですが、知らないのもいっぱい♪
眺めているだけでも楽しいです。

個人的にはこの辺が好きです。

トラのイラスト、無料です♪

2009-12-10T14:34:00.005+09:00

2010年は寅年！ということで、虎（寅）の絵を描きました。
（ちょっとかわいい感じになっちゃったので、トラ猫っぽいですね・・・。）
けど使わなかったので、なんとなくここに置いておきます。

もし気に入ってくださる方がいましたら、良識的な範囲でご自由にお使いください。
（もし何かの間違いでいっぱいダウンロードされるようだったら、その時考えよう！）
商用利用も可！と一応書いておこう。

こちらからどうぞ。
File Download（Zip）

形式はPNG、背景は透過です。
あ、入ってるイラストは上の1個だけですので・・・。

WordPressのフレームワーク

2009-12-04T14:57:00.001+09:00

最近はWordPressの勉強をちょっとだけしています。
と言ってもデザイナーなので主にデザインまわり。

フリーのテンプレートはいっぱいありますが、英語に最適化されてるのが多いし、一通り理解するためにもテンプレートを最初から自分で作ってみたりしたのですが、タグがいっぱいあってめんどくさいんです・・・。

シンプルなテーマを加工した方がいいかなぁ、と思い始めて探してみると、カスタマイズ用のフレームワークっていうのがいっぱいあるんですね。

個人的な好みでいくつか選んでみました。

Hybrid WordPress Theme Framework
（Demo）

Carrington - The CMS Theme Framework for WordPress
（Demo）
Blog、Text、Mobileの3種類あります。

Thematic, A WordPress Theme Framework
（Demo）

The Buffet Framework

タブなどのjQueryが既に組み込んであったりして、かなり便利そうです。
使い心地が良さそうのなのを選んでいじってみようと思います！

IEでも大丈夫な、角丸にするJavaScript

2009-12-03T16:00:00.011+09:00

ひとつ前の記事で書いた角丸にするスクリプト、便利なのですがIE6に対応してないのでお仕事で使うには微妙・・・と思っていたら、Internet Explorerでも大丈夫なスクリプトを発見しました！

↓こちらです。
CurvyCorners - Beautiful rounded corners for your HTML boxes

一応、使い方もメモ。

<script type="text/JavaScript" src="curvycorners.js"></script>

JavaScriptを読み込んで、

<script type="text/JavaScript">
  addEvent(window, 'load', initCorners);
  function initCorners() {
    var settings = {
      tl: { radius: 10 },
      tr: { radius: 10 },
      bl: { radius: 10 },
      br: { radius: 10 },
      antiAlias: true
    }
    curvyCorners(settings, "#myBox");
  }
</script>

コーナーのサイズと、角丸にするオブジェクト（idやclass）を指定します。
かんたん！

ボーダー、背景画像などにも対応。使いやすいです。
試してみたら、確かにIE6でも大丈夫でしたよ！

今さらですが、角丸にする「jQuery Corner」

2009-11-26T10:56:00.001+09:00

今さらな感じもしますが、何度も検索している気がするので、自分用にメモ。

オブジェクトの角を丸くするjQueryスクリプトです。
JQuery Corner Demo

まず読み込んで、

<script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script><br /><script type="text/javascript" src="/js/corner.js" charset="utf-8"></script>

適用させるidやclassと、丸の大きさを指定します。

<script type="text/javascript">
$('#corner').corner("10px");
</script>

かんたん！

もちろん、borderが指定されていても大丈夫です。
他にもいろいろな効果が付けられますが、Round以外はめったに使わないんですよね～。

IE6はダメみたいなので、角丸じゃなくても大丈夫なデザインにしておくと安心です。

かわいいフリーアイコン

2009-10-07T14:04:00.004+09:00

「You The Designer」のこちらの記事
18 New Design Freebies
を見ていたら、かわいいアイコンがあったのでメモっておきます！

Social bookmarking character s by *bevel-and-emboss on deviantART
無表情な人たちがソーシャルメディアのアイコンを持ってます。かわいい。
Double-J Design – A Set of 32 Free Sketchy Icons
手描きっぽいシステムアイコン。（商用利用可になってます。）
Back to School Icon Set by ~manda-pie on deviantART
手描きのアイコン。色が好きです。

自分でも作ろうと思いつつ、手をつけてないなぁ・・・。

デザイナーのためのAIRアプリ

2009-08-17T17:09:00.002+09:00

「Webdesigner Depot」で、便利そうなAdobe AIRアプリがたくさん紹介されていました。

40 Great Adobe AIR Applications for Designers and Developers | Webdesigner Depot

Webデザイナー的に気になったものをメモっておきます。
（元のページにはもっといろいろ載ってました。）

カラーツール

画像

ImageSizer　リサイズ、クロップのバッチ処理
Icon Generator　CS3っぽいアイコンを作成
Shrink O’Matic　ドラッグ＆ドロップでリサイズ等の処理
Random Patter　ランダムパターンを作成
Splashup Light　画像補正
JustResizeIt!　リサイズのウィジェットも作れる
PNG Icon Generator　アイコンジェネレータ
BetaDesigns Caliper　サイズを測る
Flickr Desktop Search　Flickr検索
WebKut　切り取ってキャプチャ
Websnapshot　Webページのキャプチャツール

フォント

.merlin　フォントオーガナイザー
Font Picker　フォント一覧を表示

そのほか

Boks　Blueprint CSSフレームワーク
Live Presentations　プレゼンテーション
htmlText Editor　WYSIWYG HTMLエディタ

やっと新しいPCが来たので、セットアップが終わったら色々試してみようと思います！

ポートフォリオ専用CMS「Indexhibit」

2009-08-17T14:29:00.001+09:00

「Indexhibit」というCMS、海外のサイトでよくポートフォリオ用に使われているようです。
どんななのかなぁ、と思って試しにインストールしてみました。
せっかくなので手順をメモ。

サイトはこちら。
Indexhibit

「Download」から本体をダウンロードします。
フリーですが寄付歓迎（15ユーロ）。

まず準備。
サーバ要件です。
・Linux/Apache server
・PHP4 以上
・MySQL 3.23 以上
データベースの host、name、username、password を調べておきます。

フォルダごとサーバにアップします。

「files」「gimgs」ディレクトリのパーミッションを 777 に。
「ndxz-studio」の中の「config」ディレクトリのパーミッションを 777 に。

ブラウザで /ndxz-studio/install.php にアクセス。

言語を選択（日本語もあります。）。

データベースの情報を入力。

エラーが出なければOKです。
仮のログイン名とパスワードが表示されるので覚えておきます。

ログイン画面になるので、仮ログイン名・パスワードでログインします。

「プレファレンス」というメニューから、ログイン名とパスワードを変更します。

install.phpを削除します。
ついでに、クリーンなURLになるように設定します。
（/index.php?/project/united-nations-identity/
みたいなURLを
/project/united-nations-identity/
という風に直します。）

まずhtaccessというファイルを、.htaccessにリネームします。

/ndxz-studio/defaults.phpを開き、
define('MODREWRITE', false); をdefine('MODREWRITE', true);
に書き変えます。
おわり！

肝心のCMSについてですが、インストールは簡単だし、目的が非常に特化されているので、シンプル＆ミニマムなポートフォリオサイトにはとてもいいのではないでしょうか。
（私の好きなsiiimpleに載っていそうな感じです。）

でもやっぱり機能は少ないので、CMSが苦手じゃなかったら、Wordpressとかの方が良いかも・・・。テンプレートいっぱいあるし。

CMSいろいろ試してみました。

2009-08-02T21:24:00.001+09:00

WordPressとMovable Typeは試したことがあったので、今度はその他のCMSを試してみました。

CushyCMS
CushyCMS

Drupal
drupal.org
Drupal Japan

Joomla!
Joomla!
Joomla! じゃぱん

ところが・・・
CushyCMSはインストールなしでブラウザからサイトを更新できるようになるらしく、おもしろそうだったのに、どうやら日本語がまだダメらしい。保留。
そしてDrupalは、簡単にインストールできそうでいい感じだったのに、レンタルサーバ（ロリポップ）のMySQLのバージョンが低くて、途中で終了。

結局、Joomla!をインストールしてみました。
私はサーバがよくわからないので、大量に出る「permission denied」に苦労してしまいましたが、なんとかインストールできました！
ダウンロードしてきたテンプレートも一応使えたし（これもエラーが出まくったけど・・・）、あとはオリジナルのテンプレートを使えるようになればばっちり！なんだけど。これからもう少しいじってみます。

参考にした記事はこちらです！
In choosing a CMS: 40+ Great CMS Theming Tutorials | Noupe

デザイナーのためのiPhoneアプリ

2009-07-22T17:22:00.000+09:00

Web Design Ledgerで紹介されていた、WebデザイナーのためのiPhoneアプリのまとめ。

15 Best iPhone Applications for Web Designers | Web Design Ledger

こういうのは、iTunesストアのランキング見ててもあまり出てこなかったりするので、非常に助かります！
※価格は私が調べた時点のものです。

Ego
FeedburnerやGoogle Analytics、Twitterのフォロワーなどをチェック。230円

Palettes
カラーパレットツール。1200円(Liteは無料)

WhatTheFont for iPhone
画像などで使用されているフォントを探す。無料

FTP On The Go
FTPクライアント。800円

ZeptoPad
ベクター(Vector)ベースのメモ&ホワイトボードアプリ。PCでプレゼンも。2300円

CSS CheatSheets
CSSチートシート。GoogleやHTMLのもある。115円

proSEO for iPhone
SEOツール。1200円

WorkTimer
プロジェクト毎の作業時間を記録。115円(Liteは無料)

cliqcliq Colors
カラーパレットを作成。350円

Analytics App
Google Analyticsのレポートを見る。700円

Photobucket
写真共有。無料

Network Ping for iPhone
450円(Liteは無料)

Dexigner Design Portal | Design News
デザイン関連のニュース。無料

Source Viewer
HTML、CSS、JavaScriptのソースコードを見る。115円

DatabaseViewer
データベースのビューワ。2300円

ブログエディタ「ScribeFire」

2009-07-17T21:33:00.001+09:00

「ScribeFire Blog Editor」からテスト投稿してみました。
これ、かなり使いやすい！
しばらく使ってみたいと思います。

ScribeFireはブログ記事を書くためのFirefox用アドオンです。
WordPress、Movable Type、Bloggerなどをサポートしていて、日本語化もされています。

Getting Started With ScribeFire - Scribefire: Fire up your blogging
ダウンロードはこちら。
ScribeFire Blog Editor :: Firefox Add-ons

参考にしたのはこちらの記事です。
20+ Useful Desktop Blog Editors | Webdesigner Depot

商用利用可能なフリーフォント

2009-07-17T21:20:00.000+09:00

いいな〜と思ったフリーフォント（商用利用可のもの）をメモ。
日本語のサイトをデザインしていると、英字フォントは見出しとかアクセントに使うことがほとんどなので、太めのフォントをよくチェックしています。

Cube™ font
ポスターとかに使ったらかっこ良さそう。eps形式のベクターデータです。

Cube 02™ font
同上。

Sniglet
まるくてかわいい。

Chunk
極太のセリフ体。英字新聞の見出しみたい。

Junction
BとかDの形がおもしろい。

Aller Sans
フォントファミリーが多くて、使いやすそう。

Romeral
すごく良さそう！でも使いたいときは作者にメールかコメントで連絡。

元ネタ：こちらの記事からピックアップしました。
40 Fresh Free Fonts To Enhance Your Designs | Fonts | instantShift
17 Remarkably Professional Looking Free Fonts | Web Design Ledger

きれいなデザインのコーポレートサイトまとめ

2009-07-12T22:09:00.006+09:00

今度、ある会社の公式サイトをデザインすることになりそう。
そこで、参考になりそうなコーポレートサイトっぽいものをチェックするようにしているんですが、instantShiftでちょうど良いまとめ記事を発見！

80 Corporate Website Designs For Design Inspiration | instantShift

どれもいまどきな感じのきれいなデザインです。
困ったときにはこれを見れば！という充実したまとめですが、80サイトは多いなぁ。
今回の制作で参考になりそうなのはこの辺かな・・・

Campaign Monitor

Checkout

Campfire

31Three

activeCollab

DesignBits™

Dedicated Servers

Rackspace Hosting

Business Catalyst

WooThemes

LightCMS

ExpressionEngine

Clearleft Ltd.

Nitobi

Viget Labs

iPhone 3GS

2009-06-30T08:16:00.002+09:00

買ってしまいました！
楽しいです〜!!

これはiPhoneからのテスト投稿です。

Flash CatalystとFlash Builder

2009-06-25T10:49:00.004+09:00

昨日のアドビエッジニュースにちょこっとFlash CatalystとFlash Builderのことが載っていたので見てみたんですが、何だかおもしろそうです。
ベータ版ダウンロードしてみようかな～。（新しい会社のPCが来たら…。）

「Flash Builder 4」は以前の「Flex Builder」で、RIAの開発ツール。

「Flash Catalyst」の方が馴染めそうです。
Adobe Edge: 2008年12月 Flash Catalyst：PhotoshopデザインがそのままFlexアプリのViewへと変わる！

Flash Catalystは、MXMLやActionScriptの知識がなくても静的なアートワークからFlexアプリケーションのView部分を作成できる画期的なツールです。

ActionScriptが苦手な私でもいじれそうじゃないですか？
暇な時にゆっくり調べてみます！

Photoshopで描く地球

2009-06-24T20:58:00.006+09:00

Photoshop Ladyで紹介されていたチュートリアル、
「Planet Tutorial by `dinyctis」
を見ながら作ってみました。

チュートリアルではいい感じの高画質テクスチャ画像を使うことになっているんですが、私はそんなに解像度の高いデータを作ることはないので、雲模様とパターンで誤摩化してしまいました。
Webのアクセントぐらいだったら十分使えますね〜。

きれい＆かわいいデザインのサイト

2009-06-16T21:43:00.008+09:00

このごろ気に入っているサイト3つ。
自分の趣味とはちょっと違うお仕事用のデザインばっかりしてると、違うものが見たくなるようです。

siiimple
シンプルなWebサイトを集めてあるサイト。
トップページがいい感じで、眺めているのが楽しい。

grain edit
1950〜70年代あたりのクラッシックなデザインやイラストが集められています。
あとデザイナーのインタビューも。
ちなみに、ロゴのフォントはFarao Boldだそうです。

sfgirlbybay
デザインとかインテリアとか。
写真がかわいい。

「人喰いの大鷲トリコ」

2009-06-16T21:33:00.003+09:00

「人喰いの大鷲トリコ」(The Last Guardian)は「ICO」「ワンダと巨像」の上田文人氏の新作ゲームソフト。
楽しみだけど、それまでにPS3買っておかないと・・・。

この大きい生き物かわいいな〜

Webデザイナーが使えるAppleScriptいろいろ

2009-06-01T16:06:00.005+09:00

便利そうだと思いつつほとんど使ったことがない「AppleScript」。

Smashing Magazineの記事「Mac Hacks: 17 AppleScripts To Make Your Life Easier」にまとまっていたので、あとで試そう！

Droplet

Convert Image　画像を変換して保存。

Rampage　画像ファイルのインフォメーションを表示。

SWF-Extractor　SWFファイルを抽出。

Send Attachment Droplet　添付メールを作成。

Rename Files　ファイルのリネーム。

webSafeName　Web用のファイル名にリネーム。

Simple Script

QuickTime to Photoshop [zip file]　QuickTimeのフレームをPhotoshopで開く。

iPhoto to Photoshop [zip file]　iPhotoで見ている画像をPhotoshopで開く。

Safari Web Site Validator　SafariからHTML、XHTML、CSSをバリデート。

Tiny URL AppleScript for Safari　URL短縮。

Safari CleanUp　余分なデータを削除してSafariを軽く。

Scour Web Page for Media　SafariからiTunesへメディアファイルをダウンロード。

Fuhgeddaboutit　MailからiCalのToDoを作成。

Remove iCal Duplicates　iCalと同期しているカレンダーから重複を削除。

iCalculate　作業時間をiCalに記録。

Pack 'em!　tarとbzip2かgzipに圧縮。

Folder Action

ScriptBuilders: Tagger 0.3b　Spotlight用のタグを追加。

自分でいろいろ作れるようになったら便利だろうな～。

楽しいナビゲーションのチャリティサイト

2009-05-29T16:11:00.006+09:00

Web Designer Wallの記事「30 Examples of Attractive Nav」で紹介されていたサイト、
「Red Nose Day 09」
のデザインがおもしろかったのでメモっておきます。
（「2009」となってるので来年には消えていそう。）

イギリスのチャリティイベント「Red Nose Day」のサイト（・・・だと思います）。

赤い鼻をモチーフにしていて、全体が手描き風のかわいいデザイン。
立体っぽくするのは流行っていますが、手描きなのがおもしろいな～。

ナビゲーションはマウスオーバーで震えたりボタンが引っ込んだりして、触っていて楽しいです。
小さいアイコンもちゃんと手描き風だったり、ロゴをマウスオーバーすると「HOME」っていう看板が出てきたりして、細かい。

同じ記事にあるその他のサイトも勉強になります。
詳しくはこちらで。
30 Examples of Attractive Nav

今PCにインストールしてあるソフト一覧

2009-05-26T13:22:00.005+09:00

「ahkslog: 今使っているFirefoxのアドオン」のつづき。

自分でダウンロードしてインストールしたソフトもメモしておこうっと。
使ってないのも多いけど。

ブラウザ

Firefox

Safari

Google Chrome

IETester

フリーソフトとか

Dropbox

Evernote

Thunderbird

Adobe AIR

Spry framework for Ajax

Aladdin Expander

WinRAR

FFFTP

EdMax　軽いメーラー

EdLeaf　テキストエディタ

あると便利

Taskbar Shuffle　タスクバーのボタンを並び変える

Appetizer　ランチャー

Smart Defrag　デフラグ

WinShot　スクリーンキャプチャ

IrfanView　拡張子なし画像ファイルを開くため

fla:ver　スクリーンセーバー作成

ParaFla!　Flash作成

バー工房　JANからバーコードを作成

モバイル用

iモードHTMLシミュレータ

iモード HTMLシミュレータII

絵文字入力ソフト「i絵文字」

デコメールテンプレート作成ツール

ところで今知りましたが、「LiveSwif」ってなくなっちゃったんですね。
LiveSwif - Wikipedia, the free encyclopedia
「OpenSwif」というプロジェクトに引き継がれている模様。
http://www.liveswifers.org/

今使っているFirefoxのアドオン

2009-05-26T10:48:00.007+09:00

会社のPCを買い替えてもらえることになった。
もう4年使ってて重くて困っていたので嬉しい！

そこで、いま使っているアドオンを自分用にメモしておきます。
（ちなみに家のMacもほぼ一緒。）

Delicious Bookmarks
ブックマーク。

TwitterFox
Twitter。

Firebug
デバッグ。
（虫のアイコンが嫌なので変更します！！→koress.jp: Firebugの虫アイコンを変更する方法）

IE View
見ているページをIEで開く。

gTranslate
Google翻訳。

Make Link
見ているページのURLとTitleをクリップボードにコピー。

AutoCopy
選択したテキストをクリップボードにコピー。

Top - FireMobileSimulator.org
モバイルサイトのシミュレータ。
（→記事：ahkslog: Firefoxのアドオン「FireMobileSimulator」すごい！）

あと仕事用のPCなので、こんなのも入れてみてます。
（興味ないページとかいっぱい見るから。）

Google Advertising Cookie Opt-out Plugin
ターゲット広告のクッキーを無効化。

Googleの広告Cookieオプトアウトプラグイン

自然にインスパイアされたWebデザイン

2009-05-24T18:22:00.006+09:00

「Six Revisions」の記事「30 Beautiful Web Designs Inspired by Nature」がきれいです。
やっぱり自然のモチーフはいいな〜。

好きなのはこの辺。

Yalo.fi

Glocal Ventures

Ecoki　バナーもかわいい。

August　Flashなんですね。

weberica　「weberica」っていうタイトルもいいな〜

Blue Acorn

Corvus Design Studio　鳥の絵がポイント。

Common Good Radio　すっきり。

Go Glamping　このヘッダー好き。

Quality XHTML

しかしこれだけは・・・怖すぎる。

Kinetic Shadows Design Studio

とってもかわいいアイコン集「Ultra Cute Vector icons」

2009-05-22T16:35:00.004+09:00

「Vectortuts+」の記事「Icons, Icons, Icons!」で紹介されていた、「48 Ultra Cute Vector icons」というアイコン集がすごくかわいい！

私もこんな感じのアイコンを作ってみたいな～。

$15.00でeps、ai、svg、psdファイルをダウンロードできます。
購入ページはこちら。
48 Ultra Cute Vector icons - Icons - GraphicRiver

同じデザイナーのこれもかわいい。
Winter-wonderland - Icons - GraphicRiver

スウォッチみたいなグラデーション

2009-05-13T22:02:00.003+09:00

「Veerle's blog」に紹介されていたチュートリアルを見て作ってみました。
Adobe Creative Suite 4 familyの箱みたいな、四角が並んだグラデーション。
ただのグラデーションよりもちょっと凝った感じで、印象的な背景として使えそうです。

Illustratorのブレンドツールを使用して作ります。
詳しくはこちらで。
Illustrator swatches gradient background effect | Veerle's blog

Illustratorでくるっと巻いた紙を作る方法

2009-05-11T22:42:00.003+09:00

「Vectortuts+」にIllustratorで巻いた紙を作るチュートリアルが載っていたので、早速作ってみました。

おもしろ〜い！
渦巻きのパスを描き、3D押し出しで立体にするだけなんです。

簡単ですのでぜひ。
How to Create Sheet Rolls with Custom Spirals - Vectortuts+

3Dっぽく見えるグラデーションの背景

2009-05-11T15:46:00.005+09:00

Small web design elements tutorials collection | Design-Notes
という記事にある「3D illusion in two dimension web design」がおもしろかったのでメモ。
3Dっぽく見えるグラデーションのやり方です。
上から、

少し暗い→明るい（奥の壁）

暗い→少し明るい（面）

ハイライト（角）

明るい→少し暗い、けれど1よりは明るい（手前の壁）

という風にグラデーションをかけます。
するとこんな感じに。

段っぽく見えます？

ちなみに女子はアイシャドウみたいにやるといいそうですよ！
（確かにあれも立体感が大切です。）

テキストエフェクトのチュートリアル4種

2009-04-30T14:51:00.012+09:00

ブックマークしっぱなしになっていたPhotoshopのチュートリアルを、まとめて試してみました。
レイヤー効果を使った、ダークカラーの背景に浮かび上がるようなテキストエフェクトです。

Colorful Glowing Text Effect in Photoshop - Tutorial9
1文字ずつ切り抜いてコピーして、色を重ねます。

Text Effect Quickie: Moon Shine Text Effect - Tutorial9
レイヤー効果だけで簡単に設定できました。

Advanced Glow Effects - Psdtuts+
フィルタやペンツールを使って背景を描きます。

6 Quick’n'Dirty Photoshop Text Effects From Scratch - Psdtuts+
6つのエフェクトの中のひとつ、「Quick Gold Text」です。

リンク先のプレビューを表示するJavaScript「websnapr」

2009-04-28T19:20:00.008+09:00

リンク先のプレビューを表示する「websnapr」を試してみました！
リンクにマウスオーバーすると、リンク先のスクリーンショットがバルーンで表示されるスクリプトです。

「Snap」は知っていたのですが、ちょっと高機能すぎる感じがして、もっとシンプルなのがいいな〜と思って探してみました。

それで、見つけたのがこちら。
websnapr - Website Thumbnails For Your Site

最初は普通にwebsnapr 2.0をダウンロードして設置してみたのですが、Bloggerではうまく動かず。（私、JavaScriptはほとんどわかりません・・・。）
ダメかと思ってサイトを見ていたら、「v3.0 beta」を発見！
こちらはまだベータ版なのですが、
http://www.websnapr.com/bubble/
から登録して、コードを1行追加するだけでOKとのこと。
早速やってみるとこちらはちゃんと動きました！

class指定やアイコン付きも選べて、いい感じです♪
↓アイコンはこんな風に表示されます。
websnapr

白をメインカラーに使ったきれいなサイト

2009-04-28T14:23:00.011+09:00

「Desizn Tech」の記事「Use of White in Web Design: Tips and Trends」がすてきなので、メモ。

紹介されていたサイトの中では、↓このへんが好き。

Loveleft — graphic design

pasaii design studio -

Jason Reynolds - Interactive Designer

Jeffdoe : The work of Jeff Toll

brown blog | the design blog of matt brown - thingsthatarebrown.com

白いサイト、上手に作ってあるとシンプルできれいですよね～。
デザインする時のポイントとして、

・リンクは明るいはっきりした色に
・広告は入れない
・小さいフォントは使わない

などが挙げられていました。なるほど。

詳しくはこちらで。
Use of White in Web Design: Tips and Trends | Desizn Tech

Firefoxのアドオン「FireMobileSimulator」すごい！

2009-04-27T11:36:00.007+09:00

「FireMobileSimulator」がすっごく便利で感動！
DoCoMo、au、SoftBank各端末のブラウザをシミュレートしてくれるFirefoxのアドオンです。

私はデザイナーなのでプログラムとか位置情報などはあまり関係ないのですが、3キャリアの実機でデザインをチェックするだけでも結構めんどくさくて・・・
でもこのアドオンがあれば、普通Webブラウザからは見られないキャリア公式メニューサイトもFirefoxで確認することができます。
絵文字は出るし、横幅も合わせてくれるし、最新端末も追加できるので、ものすごく助かります！
机にずらっと端末を並べてチェックしなくてもいいんですよ～

あともちろんFirefoxなので、Macからでも大丈夫です。
（公式シミュレータはみんなWindows用なのです。）

ちなみに、私が仕事で使っているサイトは全部見られましたが、見られないサイトもあるようです。（リダイレクトされるとダメなのかな？）

ダウンロードはこちら。
FireMobileSimulator.org

Safariのプラグイン20個

2009-04-23T12:39:00.006+09:00

Firefoxのアドオンは便利ですが、Mac＋Safariの使い心地も捨てがたくて、両方使っていたりします。
でも実はSafariにも便利なプラグインがいっぱいあるんですね～。

「Webdesigner Depot」でSafariのプラグインが紹介されていたので、自分用にメモ！
試してみたいものばかりなので、ちょっとずつ入れてみようと思います。

Xmarks
ブックマーク同期。

Pith Helmet
広告やムービーなどをブロック。

DeliciousSafari
Deliciousプラグイン。

Safari Tidy
コード検証。

SafariSource
ソースコードを色分け。

SafariStand
サムネールつきサイドバー、各種設定。

Saft
広告ブロックやタブなどの多機能メニューを追加。

Cooliris
きれいなインターフェイスのイメージ＆ムービーギャラリー。

Inquisitor
Googleサーチフィールドにライブサーチやサジェストの機能を追加。

Safari140
見ているサイトを短縮URLでTwitterにポスト。

1Password
パスワードマネージャー。（有料）

TabExposé
タブで開いたページをExposé風に表示。

GreaseKit
Safari版Greasemonkey。

SafariStretch
画面いっぱいのフルスクリーンにできる。

Glims
多機能メニューを追加。

CosmoPod
ムービーをiTunes用にコンバートしてダウンロード。（有料）

CutX
ペアレンタルコントロール的に使えるフィルター。

DownloadComment
ダウンロードファイルに検索用コメント（DL元のURL）を追加。

Safarilicious
Deliciousへのエクスポート＆ブックマーク管理。

Safari Microformats
Microformatsでタグ付けされたデータをアドレスブックやiCalに追加。

詳しくはこちらの記事で！
20 Excellent Plugins for Safari | Webdesigner Depot

かっこいいフリーフォント「Museo」

2009-04-09T13:11:00.008+09:00

時々紹介されているのを見かけては気になっていた、フリーフォント「Museo」をようやくダウンロードしてみました。
実際に使ってみると、やっぱりいい感じです！
MUSEO :: a Free Quality Font from exljbris

ダウンロードはMyFontsから。無料の会員登録が必要です。
Museoフォントはウェイト別に5種類あって、300・500・700がフリー、100と900は有料（$16.50）です。
サンセリフのMuseo Sansもありますね。

Webdesigner Depotの記事には、作者のJos Buivengaさんのインタビューが載ってます。
いろいろなサイトで使われてますね～。
Museo Sans Roundedも作ろうかと思っているらしいですよ！
Meet Jos Buivenga: The Designer of the Museo Font | Webdesigner Depot

Illustratorで作るレトロな幾何学模様のポスター

2009-04-05T18:29:00.010+09:00

Abduzeedoのちょっと前の記事なのですが、Illustratorで描くポスターのチュートリアルがいい感じなので、自分でも作ってみました。

どうでしょう？
（ちょっと違うな・・・）

記事はこちらです。
Retro Geometric Vectors in Space with Illustrator and Photoshop | Abduzeedo

Firefoxにスキン機能を追加

2009-04-01T12:21:00.005+09:00

TechCrunchを読んでいたら、こんなのが。
Make Your Firefox Browser Look Better With Mozilla Labs’ Latest Skins
Mozilla Labs、Firefoxのお洒落を楽しむスキン機能を発表

Firefoxにアドオンを追加すると、スキンが使えるようになるようです。

きれいなスキンがいっぱい用意されていました。
あとで試してみようっと。

Photoshopで作るスピードメーターのアイコン

2009-03-31T20:07:00.006+09:00

RJDesignz » Create a Speed Gauge and Watch Icon in Photoshop
という記事のアイコンがきれいだったので、私も作ってみました！

どうでしょう？

時計も作ってみました。

簡単できれいなのでおすすめです。

via:Photoshop Lady

CSSのプロパティを確認できるブックマークレット

2009-03-31T12:01:00.006+09:00

便利なCSSデバッグツール「XRAY」 | バシャログ。
こちらで紹介されていたブックマークレットが便利そうなので、早速使ってみました！

XRAY :: for web developers

Use it to see the box model for any element on any web page.

ブックマークレットを起動してから、見たいエレメントをクリックするとプロパティが表示されます。

横幅が何ピクセルか知りたいだけの時とか結構あるので、これは簡単に使えていいですね！

30個のきれいなメニュー

2009-03-29T20:22:00.003+09:00

Admix webで紹介されていた
「30+ Beautiful menus examples」
が良かったのでメモ！
好きなデザインばっかりで、すごく参考になりました。

いくつかピックアップ。

OC Vision
Deluge Studios
EGOLOUNGE ロールオーバーがきれい。
Jiri Tvrdek
folietto
13 Creative 色が好き。
Jay Hafling faviconもかわいい。

記事はこちら。
30+ Beautiful menus examples | Admix Web

キャンバスに描いたようなブラシセット

2009-03-28T21:34:00.006+09:00

Smashing Magazineで紹介されていた
Photoshop用のブラシセット
「Painted Canvas Brush Set」
をダウンロードしてみました！
透過具合とかがいい感じです。
ヘッダーや見出しのアクセントに使ってみよう。

ライセンスは

You can freely use it for both your private and commercial projects, including software, online services, templates and themes.

ということで、個人・商用利用共にフリーだそうです。

ダウンロードはこちらの記事の真ん中あたりから。
Friday Freebies: Photoshop Brushes, Vector Graphics, Icons

Blogger

2009-03-18T19:59:00.001+09:00

投稿してみました。