ynabokunのブックマーク - はてなブックマーク

ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。選択肢は4つ程度にとどめる今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
ynabokun 2015/01/07
リンク
SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color
もくじ PHPでSNSシェア数を取得するオリジナルSNSボタンを設置するシェア数取得〜SNSボタン設置までの流れおまけ：cssでフキダシの作り方仕上がりイメージ仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。今回もサンプルを作ってみましたよ〜。サンプルお世話になった記事今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
ynabokun 2014/08/18
リンク
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ幅をデバイスサイズに合わせるスマホを横にしたときに文字が大きくならないようにする電話番号に自動的にリンクが付かないようにするリンクを押したら電話をかけられるようにするリンクを押したらGoogleマップアプリを起動させるリンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせるまずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにするスマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
ynabokun 2014/06/10
リンク
1