island-web’s blog

ソーシャルメディアの画面サイズ

Webデザインの参考

主要SNSの画面レイアウトサイズ

上記SNSの画面レイアウトをまとめた記事がありました。
2012年11月の状況なので、現在もこのままかどうかは不明ですが、参考にはなると思います。

The Ultimate Complete Final Social Media Sizing Cheat Sheetより引用

Facebookの画面レイアウトサイズ

Facebookに関しては、2013年1月現在の規格をまとめられた記事があります。
変更の多いFacebookですが、今はこちらのサイズを基に、画像が作れますね。
利用させていただきます。ありがとうございます。

ソーシャルメディアマーケティングラボより引用

PHPで九九表を作る

作ってみた

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九九表</title>
<style>
body{
	margin: 50px;
}
table {
	border: 1px #000000 solid;
	border-collapse: collapse;
}
th,td,tr {
	border: 1px #000000 solid;
	padding: 5px;
}
th {
	fontstyle: bold;
	background-color: #ccc;
}
</style>
</head>
<body>
<h3>九九表</h3>
<table>
<tr><th><br></th>
<?php for ($j=1; $j<=9; $j++) { ?>
    <th>
    <?php print  $j ; ?>
    </th>
<?php } ?>
</tr>

<?php for ($i=1; $i<=9; $i++) { ?>
    <tr>
    <th><?php print $i ?>    </th>
    <?php for ($j=1; $j<=9; $j++) { ?>
        <td>
        <?php print $i . " x " . $j . " = " . $i*$j ; ?>
        </td>
    <?php } ?>
    </tr>
<?php } ?>
<?php ?>
</table>
</body>
</html>

H&Mや7-Elevenのデザインを手がける制作会社のWebサイトが素敵

Webサイト100

BVD ― Simplify to Clarify

何も小細工しない美しさ、圧倒的なわかりやすさのWebサイト

シンプルに自分たちの作品を見せ、導線に迷いがありません。
自社サイトで奇をてらったことや技術力を見せつけることをしないのは、自分たちの生み出す作品に自信があるためなのでしょう。
Webサイトのあり方の、一つの解答を見た気がします。

BVD

2013年デザインブログ・トップ100選

Webデザインの参考

デザインを扱うブログのトップ100をランキングした記事があったので紹介します。

Alexaランク
Twitterフォロワー数
Facebookファン数

で、ランクを集計しているようです。

いくつかをちょっと見てみただけなのですが、ブログデザインや写真・イラスト・インフォグラフィックの扱いがWebデザインの勉強に役立つなぁと思いました。
（内容まで、ちゃんと読んでないという・・・）
時間のある時にじっくり見たいので、自分のメモとしてもブログに残しておきます。

Top 100 Design Blogs To Follow In 2013

An infographic by the team at CouponAudit

表示したWebサイトを一瞬でワイヤーフレーム化するブックマークレット「Wirify」

Webデザインの参考

Webサイトがブックマークレット「Wirify」でモックアップに

Webサイトからワイヤーフレームを生成し、Webデザインの勉強に役立てられるブックマークレット「Wirify」です。

Wirify

使い方

「Wirify」をブックマークツールバーに入れます
モックアップしたいWebサイトを表示し、「Wirify」をクリック
Webサイトがワイヤーフレームになって表示されます
ワイヤーフレーム上をワンクリックで、元のWebサイトに戻ります

ニューヨークタイムズをワイヤーフレーム化

例えば、New York Times は下図のようにワイヤーフレーム化されます。

「Wirify」の利用方法

ワンクリックでワイヤーフレームが作成できる「wirify」には、様々な利用方法が考えられます。

Webデザインの勉強

「ワイヤーフレームって何？」「どうやって作るの？」というレベルでも、実際のWebサイトをワイヤーフレーム化してみることで、リアルサイトとワイヤーフレームの関係がわかります。
自分が実際にワイヤーフレームを制作する際の、有益な参考となります。

既存サイトの分析

新規Webサイト制作の際には、同業の既存サイトを分析する必要があります。
同業サイトを収集し、ワイヤーフレーム化して構成を検証することで、新規サイトのデザインや内容の方針が立てられます。

Webサイトのリニューアル

Webサイトの構成を見直したり修正する際に、「wirify」のワイヤーフレームで資料を作成。それを基にすれば、簡単に指示書を作ることが出来ます。

便利なWebサービスは積極的に利用して、効率的なWebサイト制作の手助けにしたいですね。
有料版のブックマークレット「Wirify」をゲットすると、編集可能になったり、もっと多機能になるようです。

メキシコ旅行中

Life

カンクンから行くイスラ・ムヘーレス島

Webデザインを離れてメキシコ旅行中です。
カンクンから高速艇で行ける、イスラ・ムヘーレス島に来ました。
メキシコも北半球で冬ですが、冬とは思えない天候です。

メキシコは自然も、アートも面白い場所です。
（もちろん食べ物も美味しい）
ギャラリーで新しい作家の絵を見たり、海で遊んだりしています。
建築やインテリアも、いつもいいなぁと思います。

しばらく充電して、いろいろインプットして帰りますね。

綺麗なWebデザインを見て嬉しくなった日

Webサイト100

Best of Web Design in 2012 | Inspiration

Best of Web Design in 2012 | Inspiration で紹介されていた中で、私も好きなサイトをあげてみます。全体的に、すっきりめのデザインが多いです。

Best of Web Design in 2012 | Inspiration

Foundry Collective: A Branding & Digital Agency

細い区切り線の効果で、ホワイトスペースが有効に生かされています。

Foundry Collective: A Branding & Digital Agency

Pure and Artisanal Loose Leaf Teas | Sanctuary T Shop

多色使いのグローバルナビゲーションですが、全体的に統一感があり、商品パッケージの色ともマッチしています。

Pure and Artisanal Loose Leaf Teas | Sanctuary T Shop

Studio AIRPORT

モニター全面を使った構成でもくどさがなく、テキストの可視性に優れています。インフォグラフィックを使ったグローバルナビがいいなぁ。

Studio AIRPORT

内地へ行っていたり、週明けから今月いっぱいメキシコに行ったりするので、更新がしばらく途絶えます。いろんなものを見て、充電して、今後に活かしていきたいと思います。