写真の上に額縁などの画像をcssで表示させ、
写真を更新するときは写真だけを上書きすればいいようにする方法
----------------------------------
■html
＜div class="bnrCampaign"＞
＜span＞＜/span＞
＜img width="470" height="250" alt="今月のキャンペーン" /＞
＜/div＞
■CSS
.bnrCampaign{
width:470px;
height: 250px;
position: relative;
}
.bnrCampaign span{
width:470px;
height: 250px;
display: block;
position: absolute;
background: url(images/footer_cam.jpg) ;
}
----------------------------------
リンクテキストだけ右寄せにしたいとき
----------------------------------
<a href="#" class="linkRight">右寄せにしたいリンクテキスト</a>
.linkRight {
display : block;
width : 100%;
text-align : right;
}
----------------------------------
ブロック要素を作って、その中で「text-align:right;」をつくる！
----------------------------------
<a href="#" class="linkRight">右寄せにしたいリンクテキスト</a>
.linkRight {
display : block;
width : 100%;
text-align : right;
}
----------------------------------
ブロック要素を作って、その中で「text-align:right;」をつくる！
背景画像が2000pxくらいあって、
ウィンドウの幅を小さくしてもメイン画像と一緒についてきてくれるようにする方法！
----------------------------------
.index_header{
background:url(images/index_mainbg.jpg) no-repeat center top;
}
.index_main{
background: url(images/index_main.jpg) no-repeat center top ;
width: 1000px;
height: 600px;
margin: 0 auto;
}
----------------------------------
centerで解決します！
ウィンドウの幅を小さくしてもメイン画像と一緒についてきてくれるようにする方法！
----------------------------------
.index_header{
background:url(images/index_mainbg.jpg) no-repeat center top;
}
.index_main{
background: url(images/index_main.jpg) no-repeat center top ;
width: 1000px;
height: 600px;
margin: 0 auto;
}
----------------------------------
centerで解決します！
写真の明るさとかの調整の基本的な流れ
1. 明るさ・コントラスト
2. レベル補正（トーンカーブ）
3. 露光量 （※必要に応じて）
4. 彩度
彩度を調整後、自然な彩度で微調整
5. 部分的な明暗の調整
・焼きこみ…その箇所だけ暗くする （周りを暗くすると中央が際立つ）
・覆い焼き…その箇所だけ明るくする
6. シワとかいらないところの調整
・スタンプツール
おわり！
1. 明るさ・コントラスト
2. レベル補正（トーンカーブ）
3. 露光量 （※必要に応じて）
4. 彩度
彩度を調整後、自然な彩度で微調整
5. 部分的な明暗の調整
・焼きこみ…その箇所だけ暗くする （周りを暗くすると中央が際立つ）
・覆い焼き…その箇所だけ明るくする
6. シワとかいらないところの調整
・スタンプツール
おわり！
Photoshopで人を 消す方法
1. 消したいところの選択
クイック選択ツールで選択
・不要な箇所は+「Alt」で消す
・必要な箇所はクリック
2. コンテンツに応じる
「Shift」 +「F5」でポップアップ出す。
コンテンツに応じる → OK
★POINT
・うまくいかない時は範囲の箇所を増やしたり減らしたり。
・最後の微調整はコピースタンプツール
1. 消したいところの選択
クイック選択ツールで選択
・不要な箇所は+「Alt」で消す
・必要な箇所はクリック
2. コンテンツに応じる
「Shift」 +「F5」でポップアップ出す。
コンテンツに応じる → OK
★POINT
・うまくいかない時は範囲の箇所を増やしたり減らしたり。
・最後の微調整はコピースタンプツール
Photoshopで顔のテカリを取る方法
＜スタンプツール＞
1. スタンプツール選択
2. 描画モード 「比較（暗）」選択
不透明度 「50％」
※描画モードを「比較（暗）」にすると、てかった部分が他の部分にスタンプされることなく描画できる
3. コピースタンプでおわり！
※明るくしたい場合は 「比較（明）」 を使えばOK
＜スタンプツール＞
1. スタンプツール選択
2. 描画モード 「比較（暗）」選択
不透明度 「50％」
※描画モードを「比較（暗）」にすると、てかった部分が他の部分にスタンプされることなく描画できる
3. コピースタンプでおわり！
※明るくしたい場合は 「比較（明）」 を使えばOK
WCAN2013 Summerに参加しました。
とっても興味深かったし、刺激になった！業務にも役立てれる内容がいっぱいありました！
行ってよかった！
会社の人や友達と行けて、その後に内容について話せるのも良かった＾＾
人の考え方にも刺激を受けました。
----------------------------------
----------------------------------
矢野りん さん／モバイルコンテンツデザイン 設計から実装までのデザインプロセス
----------------------------------
----------------------------------
■モバイルデザインはアジャイル
アジャイル…短期間で開発、改良を繰り返す
----------------------------------
例）shimeji
【スタートアップ時期（ユーザー300万人以下）】
コアの開発→新機能→改良→新機能→改良→新機能→改良
★速さ ～デザインパターン～
【信頼性の向上（ユーザー500万人以上）】
新機能→改良→改良→改良→新機能→改良→改良→改良
★質 ～デザインガイドライン～
・ユーザビリティの向上
・安定化重視
・デザインの質の向上
----------------------------------
【速さ】デザインパターン
速さを求めるときはデザインパターンを覚えておいて、どれかを当てはめればOK！
（1）ドリルダウン
（2）エキスパンドリスト
（3）アクションバー
（4）ダッシュボード
（5）タブ
【質】デザインガイドライン
（1）色
ブランドカラーのガイドラインを使う
メインカラー、アクセントカラーなど
（2）アイコンなどのボリュームの大きさを作る
例では「た」の大きさに合わせてアイコンを作っていた。
（3）パーツのブラッシュアップ
■パーツの最適化
★タップ領域：7mm四方が目安（人がタップできる大きさ）
※6mm以下の場合、あえて色のある箇所は4mmくらいにする→人は注意深くタップするから押してくれる
■文字
全角2mm四方で読める
★スマホは歩きながら読めることが大事！
■色の差
PCよりもスマホの方がずっと色がキレイ、鮮明
小さな色の差で印象がすごく変る
■Bold 注意！
海外製AndroidはBold使えないから
フォントサイズで差をつける
■彩色
バックライト、明るい場所、暗い場所などの
違いが大きく出るのでチェックする必要あり
■スマホユーザーは自分の指の手元しか見ない
指の位置に意識する
（遠いところに関係するアイコン置かない）
■スマホユーザーは文字を読まない
できるだけ文字数少なく！
○～しましょう
×～するようお願いいたします
■漢字もNG
■入力することをすごく嫌がる
モバイルはまめにデザインの最適化が必要！！！！！
スマホの豆知識を教えてもらいました。
スマホデザインがしたくなってきた！
これを生かしてデザインしよう！！！
やっぱりPDCAが大事なんやな～
スマホデザインがまだまだ少ないし、
スマホデザインでいいなーと思うものがあまりない。
今のうちからアンテナはって、スマホデザインに慣れおく、
いいデザインストックしとこう。
----------------------------------
----------------------------------
佐藤歩 さん／ハイパフォーマンス・Webフロントエンド
----------------------------------
----------------------------------
■パフォーマンスは品質
1秒遅くなると…
・CV 7％DOWN
・PV 11％DOWN
GAも速度の提案をしてくれている
方法①リクエスト
・js、cssまとめる
・画像ファイルを減らす
・WEBフォントを使う
方法②リソースサイズを減らす
・テキスト 無駄な改行減らす
・image の画素数落とす
画像をPCとモバイルで変えるなど
・css3
radius、box-shadowの組み合わせ…かなり重くなる
→場合によっては画像にした方がいい
・パララックスは遅い
・巻き込み事件がある
それ自体は重くなくても、
position:relative; などによって、
アニメーションしているものの重さがそれ以外を巻き込んで重くなることがある
→z-indexで回避できる
難しかった…
でもパフォーマンスは品質っていうのはよくわかります。
そろそろデザインのキレイさだけを求めるのはやめようと思います！
----------------------------------
----------------------------------
阿部淳也 さん／Co-Creative時代の企画・ディレクション
----------------------------------
----------------------------------
今後、もっと文字読まなくなってくる
→動画やLINEのスタンプ、ピンタレストの流行からわかるように
★提案時にクライアントと一緒になって提案を考えてもらう
クライアントに自分事になってもらう
（例）
みんなでポストイットつかってやる、
ドキュメントだとどこを見ているかわからない
クライアントに自分事になってもらうっていうのは
すごく納得しました！
協力的なお客様のほうがずっと成果でてるし！
私もお客様の協力を得れるように誘導する力が必要やね。
この2つが課題です。
・サイト制作時にお客様の協力を得れるように誘導すること
・お客様にサイトの更新の重要性を伝えること
おわり
とっても興味深かったし、刺激になった！業務にも役立てれる内容がいっぱいありました！
行ってよかった！
会社の人や友達と行けて、その後に内容について話せるのも良かった＾＾
人の考え方にも刺激を受けました。
----------------------------------
----------------------------------
矢野りん さん／モバイルコンテンツデザイン 設計から実装までのデザインプロセス
----------------------------------
----------------------------------
■モバイルデザインはアジャイル
アジャイル…短期間で開発、改良を繰り返す
----------------------------------
例）shimeji
【スタートアップ時期（ユーザー300万人以下）】
コアの開発→新機能→改良→新機能→改良→新機能→改良
★速さ ～デザインパターン～
【信頼性の向上（ユーザー500万人以上）】
新機能→改良→改良→改良→新機能→改良→改良→改良
★質 ～デザインガイドライン～
・ユーザビリティの向上
・安定化重視
・デザインの質の向上
----------------------------------
【速さ】デザインパターン
速さを求めるときはデザインパターンを覚えておいて、どれかを当てはめればOK！
（1）ドリルダウン
（2）エキスパンドリスト
（3）アクションバー
（4）ダッシュボード
（5）タブ
【質】デザインガイドライン
（1）色
ブランドカラーのガイドラインを使う
メインカラー、アクセントカラーなど
（2）アイコンなどのボリュームの大きさを作る
例では「た」の大きさに合わせてアイコンを作っていた。
（3）パーツのブラッシュアップ
■パーツの最適化
★タップ領域：7mm四方が目安（人がタップできる大きさ）
※6mm以下の場合、あえて色のある箇所は4mmくらいにする→人は注意深くタップするから押してくれる
■文字
全角2mm四方で読める
★スマホは歩きながら読めることが大事！
■色の差
PCよりもスマホの方がずっと色がキレイ、鮮明
小さな色の差で印象がすごく変る
■Bold 注意！
海外製AndroidはBold使えないから
フォントサイズで差をつける
■彩色
バックライト、明るい場所、暗い場所などの
違いが大きく出るのでチェックする必要あり
■スマホユーザーは自分の指の手元しか見ない
指の位置に意識する
（遠いところに関係するアイコン置かない）
■スマホユーザーは文字を読まない
できるだけ文字数少なく！
○～しましょう
×～するようお願いいたします
■漢字もNG
■入力することをすごく嫌がる
モバイルはまめにデザインの最適化が必要！！！！！
スマホの豆知識を教えてもらいました。
スマホデザインがしたくなってきた！
これを生かしてデザインしよう！！！
やっぱりPDCAが大事なんやな～
スマホデザインがまだまだ少ないし、
スマホデザインでいいなーと思うものがあまりない。
今のうちからアンテナはって、スマホデザインに慣れおく、
いいデザインストックしとこう。
----------------------------------
----------------------------------
佐藤歩 さん／ハイパフォーマンス・Webフロントエンド
----------------------------------
----------------------------------
■パフォーマンスは品質
1秒遅くなると…
・CV 7％DOWN
・PV 11％DOWN
GAも速度の提案をしてくれている
方法①リクエスト
・js、cssまとめる
・画像ファイルを減らす
・WEBフォントを使う
方法②リソースサイズを減らす
・テキスト 無駄な改行減らす
・image の画素数落とす
画像をPCとモバイルで変えるなど
・css3
radius、box-shadowの組み合わせ…かなり重くなる
→場合によっては画像にした方がいい
・パララックスは遅い
・巻き込み事件がある
それ自体は重くなくても、
position:relative; などによって、
アニメーションしているものの重さがそれ以外を巻き込んで重くなることがある
→z-indexで回避できる
難しかった…
でもパフォーマンスは品質っていうのはよくわかります。
そろそろデザインのキレイさだけを求めるのはやめようと思います！
----------------------------------
----------------------------------
阿部淳也 さん／Co-Creative時代の企画・ディレクション
----------------------------------
----------------------------------
今後、もっと文字読まなくなってくる
→動画やLINEのスタンプ、ピンタレストの流行からわかるように
★提案時にクライアントと一緒になって提案を考えてもらう
クライアントに自分事になってもらう
（例）
みんなでポストイットつかってやる、
ドキュメントだとどこを見ているかわからない
クライアントに自分事になってもらうっていうのは
すごく納得しました！
協力的なお客様のほうがずっと成果でてるし！
私もお客様の協力を得れるように誘導する力が必要やね。
この2つが課題です。
・サイト制作時にお客様の協力を得れるように誘導すること
・お客様にサイトの更新の重要性を伝えること
おわり
相変わらず私は上司に恵まれてるなーと思います☆
いつもはほめてくれて、キャピキャピ仕事してるけど、会社としての提出物にはすごく細部までこだわる。
これくらいいいのに…時間かけすぎなんじゃ⁈と思うくらい、こだわる。
自分に一番厳しくて、人にもちょっと厳しい。
今日もわかりにくい、とビシっと言われた(°_°)！
>会社を大きく育てていきたいから、こうやって言ってくれるんやね。
いつも会社の成長を考えてるなーとすごく思います^ ^
こういうこだわりを正直に地道に続けていたから、今のこの会社の結果がでてるんだと思います。
技術の面や、情報収縮、発信の面ではこの人にはかなわない。
わたしはやっぱり大好きなデザインでこの人から信頼を勝ち得たい！
正直、入社前の期待が大きすぎて、今の私は期待以下やったなーと思われているような不安があります…
デザインの面や、会社に価値のある発言をする、という面で。
ガツガツさも不足してる…
上司からのほめ言葉も、自分が納得できてないから、本気で喜べなくて、私に気を遣ってくれてるっていうのがわかる。。
あと、これから入ってくる優秀な新人さんにも、自分との比較っていう点で不安が多くて素直に喜べないなぁ。。
会社にはとってもうれしい喜ぶべきことやのに。。
自分に実力つけるしか、解決方法はないね☆
私も「やさしくて大きな会社をつくる」のに貢献できるように仕事します！
信頼しても依存はしない！
今度こそ、自分の居心地のいい居場所を作れるようにしよう━━(｡･∀･)ﾉ━━
おーーー！
いつもはほめてくれて、キャピキャピ仕事してるけど、会社としての提出物にはすごく細部までこだわる。
これくらいいいのに…時間かけすぎなんじゃ⁈と思うくらい、こだわる。
自分に一番厳しくて、人にもちょっと厳しい。
今日もわかりにくい、とビシっと言われた(°_°)！
>会社を大きく育てていきたいから、こうやって言ってくれるんやね。
いつも会社の成長を考えてるなーとすごく思います^ ^
こういうこだわりを正直に地道に続けていたから、今のこの会社の結果がでてるんだと思います。
技術の面や、情報収縮、発信の面ではこの人にはかなわない。
わたしはやっぱり大好きなデザインでこの人から信頼を勝ち得たい！
正直、入社前の期待が大きすぎて、今の私は期待以下やったなーと思われているような不安があります…
デザインの面や、会社に価値のある発言をする、という面で。
ガツガツさも不足してる…
上司からのほめ言葉も、自分が納得できてないから、本気で喜べなくて、私に気を遣ってくれてるっていうのがわかる。。
あと、これから入ってくる優秀な新人さんにも、自分との比較っていう点で不安が多くて素直に喜べないなぁ。。
会社にはとってもうれしい喜ぶべきことやのに。。
自分に実力つけるしか、解決方法はないね☆
私も「やさしくて大きな会社をつくる」のに貢献できるように仕事します！
信頼しても依存はしない！
今度こそ、自分の居心地のいい居場所を作れるようにしよう━━(｡･∀･)ﾉ━━
おーーー！
横並びのブロック要素の高さを揃える方法です。
できたできた～( ´∀｀)ﾉ
■多段
display: inline-block;で横並びにする
---------------------------------------
ul.inl_block li {
display: inline-block; /* 横並び */
width: 148px;
vertical-align: top; /* li要素を上端揃えに */
margin: 0 20px 20px 0;
padding: 20px;
border: 1px solid #CCC;
}
/* IE6 */
ul.inl_block li {
_display: inline; /* display: inline-block;の代わり */
_zoom: 1; /* 状況によって使い分ける */
}
/* IE7 */
*:first-child+html ul.inl_block li {
display: inline; /* display: inline-block;の代わり */
zoom: 1; /* 状況によって使い分ける */
}
---------------------------------------
※参考
http://www.xenophy.com/webdesign/2343
これもやってみたけど、多段の場合はそれぞれボックスで囲わないとできないらしい。。。
上にどんどん追加できる上記の方法を採用！
■display: table;
---------------------------------------
#container {
width: 300px;
display: table;
}
#left_colmun {
text-align: center;
width: 200px;
background: #aaaaee;
display: table-cell;
}
#right_colmun {
text-align: center;
width: 100px;
background: #99ff99;
display: table-cell;
}
---------------------------------------
※参考
http://tukuruder.com/archives/1257
IE7以前は非対応。早くなくなれ～IE7！
■margin-bottom: -32768px;
---------------------------------------
#container {
width: 300px;
overflow: hidden;
}
#left_colmun {
text-align: center;
width: 200px;
background: #aaaaee;
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#right_colmun {
text-align: center;
width: 100px;
background: #99ff99;
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
---------------------------------------
※参考
http://tukuruder.com/archives/1257
できたできた～( ´∀｀)ﾉ
■多段
display: inline-block;で横並びにする
---------------------------------------
ul.inl_block li {
display: inline-block; /* 横並び */
width: 148px;
vertical-align: top; /* li要素を上端揃えに */
margin: 0 20px 20px 0;
padding: 20px;
border: 1px solid #CCC;
}
/* IE6 */
ul.inl_block li {
_display: inline; /* display: inline-block;の代わり */
_zoom: 1; /* 状況によって使い分ける */
}
/* IE7 */
*:first-child+html ul.inl_block li {
display: inline; /* display: inline-block;の代わり */
zoom: 1; /* 状況によって使い分ける */
}
---------------------------------------
※参考
http://www.xenophy.com/webdesign/2343
これもやってみたけど、多段の場合はそれぞれボックスで囲わないとできないらしい。。。
上にどんどん追加できる上記の方法を採用！
■display: table;
---------------------------------------
#container {
width: 300px;
display: table;
}
#left_colmun {
text-align: center;
width: 200px;
background: #aaaaee;
display: table-cell;
}
#right_colmun {
text-align: center;
width: 100px;
background: #99ff99;
display: table-cell;
}
---------------------------------------
※参考
http://tukuruder.com/archives/1257
IE7以前は非対応。早くなくなれ～IE7！
■margin-bottom: -32768px;
---------------------------------------
#container {
width: 300px;
overflow: hidden;
}
#left_colmun {
text-align: center;
width: 200px;
background: #aaaaee;
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#right_colmun {
text-align: center;
width: 100px;
background: #99ff99;
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
---------------------------------------
※参考
http://tukuruder.com/archives/1257
こんな風にお客様の成功を喜んだり、応援できるようになりたい！
http://www.facebook.com/photo.php?fbid=603349656341921&set=a.239399972736893.69468.170122632997961&type=1&theater
こんな会社だと、お客様もうれしくなるし、一緒にがんばってる感がでるな～☆
お客様が喜んでくれることがこっちにも伝わってくることが、私へのモチベーションアップになるし。
こういう風習があると、社内でもお客様の情報が少しでも共有できるようになる気がする♪
http://www.facebook.com/photo.php?fbid=603349656341921&set=a.239399972736893.69468.170122632997961&type=1&theater
こんな会社だと、お客様もうれしくなるし、一緒にがんばってる感がでるな～☆
お客様が喜んでくれることがこっちにも伝わってくることが、私へのモチベーションアップになるし。
こういう風習があると、社内でもお客様の情報が少しでも共有できるようになる気がする♪