SlideShare uma empresa Scribd logo
1 de 11
My Yahoo! 背景テーマ デザインのルール 応募する人は必ず 読んでください
INDEX デザインを制作する前に 1-1. My Yahoo! とは? 2. どこをデザインするの? 2-1. ベースカラーの選択(シンプルカラー12色) 2-2. ヘッダーのルール  >>補足:グラデーションによるフェイドアウトのやり方 2-3. ボディのルール 2-4. Yahoo! JAPAN ロゴのルール 3. オススメ:より「ぴったりな」背景テーマを作るために
1. デザインを制作する前に 必ず、以下の内容を守ってご応募ください。 ・作品を制作する際には、必ず、公募概要ページ(http://www.loftwork.com/blog/pickup/myyahoo/ )で配布されているPSD形式のテンプレートファイル(12種類)のどれかを使用して制作してください。 ・作品応募時はJPEG、PNG、GIFいずれのファイル形式で、1枚の画像を提出してください。採用決定後は、PSD形式(CS4以下)でレイヤーが分割された状態のファイルをご提出いただきます。  制作時に使用したPSDファイルは、レイヤーを統合せず取っておいてください ・必ず、公募概要ページ内の「応募方法」に沿ってご応募ください。特に、応募用の「テーマタグ」を入力することを忘れると、応募が完了しませんので、ご注意ください。 ・公募概要ページ内の「許諾事項」を必ずお読みください。
1-1. My Yahoo! とは? My Yahoo! と 背景テーマ My Yahoo!は、自分専用のページを作れる日本最大のカスタマイズサービスです。Yahoo! JAPANのサービスやコンテンツ、アプリ、およびインターネット上のブログや各種ニュースサイトのRSSなど、好きな情報を組み合わせたあなただけのページを作ることができます。     My Yahoo!で実際にカスタマイズを体験してみる http://my.yahoo.co.jp/  そして、My Yahoo! では、背景テーマを選択することでページデザインを自分好みに変えることができます。 今回つくるのは、 この背景テーマの デザインだよ!
2. どこをデザインするの? デザインするのは、黄色く色のついた要素のみです。 めやすとして、ヘッダー画像+ボディ画像1枚で40KBになるように制作してください。 ダミーコンテンツ + My Yahoo! ロゴ ※ 編集不可 ヘッダー + コピーライト(任意) MY Yahoo! ボディ コンテンツの 中身はデザイン 対象外だよ コンテンツの要素の色を12色のベースカラーから選択します
2-1. ベースカラーの選択(シンプルカラー 12色) 「シンプルカラー」12色の中からお好きなベースカラーを選んで、公募概要ページ  (http://www.loftwork.com/blog/pickup/myyahoo/)よりテンプレートをダウンロードしてください。 ダミーコンテンツ、Yahoo! JAPANロゴ、フッター部分は編集不可です。 My Yahoo!スタイル ブルー ピンク オレンジ グリーン グレー パープル アクアブラック クリアミント シンプル シンプルブラック チェリーピンク
2-2. ヘッダーのルール ・サイズ  - 横幅970~1280 pix  - 縦幅132 pix ・「(C)作者名」を入れることができます。   中央よりも右側で、ダミーコンテンツやテキストなどと重ならない箇所に入れてください。 ・デザインパターンは以下のA・Bのどちらかを選びます。 132pix (C)loft-taro 970~1280pix パターンB: くりかえし 画面幅いっぱいに、同じ画像がくりかえしで表示されます パターンA: 1枚絵(固定) 1枚絵で固定された絵が表示されます。画面幅がヘッダーの画像幅超えると、左右にヘッダー部分の背景色が現れます。 NG例:規定サイズ内で大きく切れてしまうデザイン どうしても切れてしまう場合は、切れ目にグラデーションを入れてフェードアウトしてください。(詳細は次ページ参照) NG例:Yahoo! ロゴと大きく重なるデザイン 画像がYahoo! のロゴの後ろに重なり、ロゴの視認性が悪くなってしまいます。 × × My Yahoo! ×
補足:グラデーションによるフェイドアウトのやり方 規定サイズ横幅970~1280pix × 縦幅132 pixの中で、どうしても、デザインを切りたい場合は、切れ目にグラデーションを入れてぼかしてください。 例) 横幅970pix (C)loftwork 切れてしまっている (C)loftwork グラデーションでぼかす
2-3. ボディのルール C・Dどちらかのパターンで作成してください。 パターンC: ワンポイント(固定) フッターの上に、ワンポイントでデザインを入れることができます。 パターンD: タイリング(全面) ページ全面に、同じ画像がくりかえしで表示されます。タイリングのサイズ規定は特にありません。 ワンポイントの 場合は、背景色も 入れてね 一枚の画像を全面で繰り返す (実際は継ぎ目は見えません)
2-4. Yahoo! JAPAN ロゴのルール ちゃんと 守ってね
3. オススメ:より「ぴったりな」背景テーマを作るために 実際にMy Yahoo!を使って、様々な背景テーマを試しながら、研究しましょう。 http://my.yahoo.co.jp/ 「My Yahoo! の設定」から、様々な背景テーマを 試すことができます。「シンプルカラー」では 12色のベースカラーを実際に試すこともできます。

Mais conteúdo relacionado

Mais de loftwork

20171013 daigakuweb vol2_terai
20171013 daigakuweb vol2_terai20171013 daigakuweb vol2_terai
20171013 daigakuweb vol2_terailoftwork
 
100年先につながる新しい価値を目指して、パナソニックが100BANCHをつくった理由
100年先につながる新しい価値を目指して、パナソニックが100BANCHをつくった理由100年先につながる新しい価値を目指して、パナソニックが100BANCHをつくった理由
100年先につながる新しい価値を目指して、パナソニックが100BANCHをつくった理由loftwork
 
大規模案件の苦悩から生まれた
柔軟なカスタムフィールド設計
大規模案件の苦悩から生まれた
柔軟なカスタムフィールド設計大規模案件の苦悩から生まれた
柔軟なカスタムフィールド設計
大規模案件の苦悩から生まれた
柔軟なカスタムフィールド設計loftwork
 
KIT ハッカソン『里山で創るエデュテックトイ』参加誓約書
KIT ハッカソン『里山で創るエデュテックトイ』参加誓約書KIT ハッカソン『里山で創るエデュテックトイ』参加誓約書
KIT ハッカソン『里山で創るエデュテックトイ』参加誓約書loftwork
 
食でつながる場の仕掛け 「訪日外国人」「地域社会」のための新しい食体験 Presented by NEC 参加同意書
食でつながる場の仕掛け 「訪日外国人」「地域社会」のための新しい食体験 Presented by NEC 参加同意書食でつながる場の仕掛け 「訪日外国人」「地域社会」のための新しい食体験 Presented by NEC 参加同意書
食でつながる場の仕掛け 「訪日外国人」「地域社会」のための新しい食体験 Presented by NEC 参加同意書loftwork
 
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!loftwork
 
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門loftwork
 
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術loftwork
 
20160712_CreativeMeeting_RyokoIwasaki
20160712_CreativeMeeting_RyokoIwasaki20160712_CreativeMeeting_RyokoIwasaki
20160712_CreativeMeeting_RyokoIwasakiloftwork
 
20160909 Agreement v1.2
20160909 Agreement v1.220160909 Agreement v1.2
20160909 Agreement v1.2loftwork
 
20160803 axa agreement_ver1
20160803 axa agreement_ver120160803 axa agreement_ver1
20160803 axa agreement_ver1loftwork
 
Design Fiction Workshop 参加同意書
Design Fiction Workshop 参加同意書Design Fiction Workshop 参加同意書
Design Fiction Workshop 参加同意書loftwork
 
2016年4月8日JAPANブランドプロデュース支援事業(MORE THAN プロジェクト)説明会資料
2016年4月8日JAPANブランドプロデュース支援事業(MORE THAN プロジェクト)説明会資料2016年4月8日JAPANブランドプロデュース支援事業(MORE THAN プロジェクト)説明会資料
2016年4月8日JAPANブランドプロデュース支援事業(MORE THAN プロジェクト)説明会資料loftwork
 
モバイルサイトのローカルナビゲーション
モバイルサイトのローカルナビゲーションモバイルサイトのローカルナビゲーション
モバイルサイトのローカルナビゲーションloftwork
 
未来をデザインする Ideathon & Makeathon 参加同意書
未来をデザインする Ideathon & Makeathon 参加同意書未来をデザインする Ideathon & Makeathon 参加同意書
未来をデザインする Ideathon & Makeathon 参加同意書loftwork
 
2014台湾合宿_Team09_neng-a-thon
2014台湾合宿_Team09_neng-a-thon2014台湾合宿_Team09_neng-a-thon
2014台湾合宿_Team09_neng-a-thonloftwork
 
2014台湾合宿_Team01_norimakifab
2014台湾合宿_Team01_norimakifab2014台湾合宿_Team01_norimakifab
2014台湾合宿_Team01_norimakifabloftwork
 
2014台湾合宿_Team07_make-a-thon
2014台湾合宿_Team07_make-a-thon2014台湾合宿_Team07_make-a-thon
2014台湾合宿_Team07_make-a-thonloftwork
 
2014台湾合宿_Team10_HERE YOU GO
2014台湾合宿_Team10_HERE YOU GO2014台湾合宿_Team10_HERE YOU GO
2014台湾合宿_Team10_HERE YOU GOloftwork
 
2014台湾合宿_Team08_Re:Invent
2014台湾合宿_Team08_Re:Invent2014台湾合宿_Team08_Re:Invent
2014台湾合宿_Team08_Re:Inventloftwork
 

Mais de loftwork (20)

20171013 daigakuweb vol2_terai
20171013 daigakuweb vol2_terai20171013 daigakuweb vol2_terai
20171013 daigakuweb vol2_terai
 
100年先につながる新しい価値を目指して、パナソニックが100BANCHをつくった理由
100年先につながる新しい価値を目指して、パナソニックが100BANCHをつくった理由100年先につながる新しい価値を目指して、パナソニックが100BANCHをつくった理由
100年先につながる新しい価値を目指して、パナソニックが100BANCHをつくった理由
 
大規模案件の苦悩から生まれた
柔軟なカスタムフィールド設計
大規模案件の苦悩から生まれた
柔軟なカスタムフィールド設計大規模案件の苦悩から生まれた
柔軟なカスタムフィールド設計
大規模案件の苦悩から生まれた
柔軟なカスタムフィールド設計
 
KIT ハッカソン『里山で創るエデュテックトイ』参加誓約書
KIT ハッカソン『里山で創るエデュテックトイ』参加誓約書KIT ハッカソン『里山で創るエデュテックトイ』参加誓約書
KIT ハッカソン『里山で創るエデュテックトイ』参加誓約書
 
食でつながる場の仕掛け 「訪日外国人」「地域社会」のための新しい食体験 Presented by NEC 参加同意書
食でつながる場の仕掛け 「訪日外国人」「地域社会」のための新しい食体験 Presented by NEC 参加同意書食でつながる場の仕掛け 「訪日外国人」「地域社会」のための新しい食体験 Presented by NEC 参加同意書
食でつながる場の仕掛け 「訪日外国人」「地域社会」のための新しい食体験 Presented by NEC 参加同意書
 
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
ロフトワークが実践する「CMSを導入したい人とCMSを導入する人とのギャップの埋め方」の秘訣!
 
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
 
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術
 
20160712_CreativeMeeting_RyokoIwasaki
20160712_CreativeMeeting_RyokoIwasaki20160712_CreativeMeeting_RyokoIwasaki
20160712_CreativeMeeting_RyokoIwasaki
 
20160909 Agreement v1.2
20160909 Agreement v1.220160909 Agreement v1.2
20160909 Agreement v1.2
 
20160803 axa agreement_ver1
20160803 axa agreement_ver120160803 axa agreement_ver1
20160803 axa agreement_ver1
 
Design Fiction Workshop 参加同意書
Design Fiction Workshop 参加同意書Design Fiction Workshop 参加同意書
Design Fiction Workshop 参加同意書
 
2016年4月8日JAPANブランドプロデュース支援事業(MORE THAN プロジェクト)説明会資料
2016年4月8日JAPANブランドプロデュース支援事業(MORE THAN プロジェクト)説明会資料2016年4月8日JAPANブランドプロデュース支援事業(MORE THAN プロジェクト)説明会資料
2016年4月8日JAPANブランドプロデュース支援事業(MORE THAN プロジェクト)説明会資料
 
モバイルサイトのローカルナビゲーション
モバイルサイトのローカルナビゲーションモバイルサイトのローカルナビゲーション
モバイルサイトのローカルナビゲーション
 
未来をデザインする Ideathon & Makeathon 参加同意書
未来をデザインする Ideathon & Makeathon 参加同意書未来をデザインする Ideathon & Makeathon 参加同意書
未来をデザインする Ideathon & Makeathon 参加同意書
 
2014台湾合宿_Team09_neng-a-thon
2014台湾合宿_Team09_neng-a-thon2014台湾合宿_Team09_neng-a-thon
2014台湾合宿_Team09_neng-a-thon
 
2014台湾合宿_Team01_norimakifab
2014台湾合宿_Team01_norimakifab2014台湾合宿_Team01_norimakifab
2014台湾合宿_Team01_norimakifab
 
2014台湾合宿_Team07_make-a-thon
2014台湾合宿_Team07_make-a-thon2014台湾合宿_Team07_make-a-thon
2014台湾合宿_Team07_make-a-thon
 
2014台湾合宿_Team10_HERE YOU GO
2014台湾合宿_Team10_HERE YOU GO2014台湾合宿_Team10_HERE YOU GO
2014台湾合宿_Team10_HERE YOU GO
 
2014台湾合宿_Team08_Re:Invent
2014台湾合宿_Team08_Re:Invent2014台湾合宿_Team08_Re:Invent
2014台湾合宿_Team08_Re:Invent
 

My Yahoo! 背景テーマ デザインのルール

  • 1. My Yahoo! 背景テーマ デザインのルール 応募する人は必ず 読んでください
  • 2. INDEX デザインを制作する前に 1-1. My Yahoo! とは? 2. どこをデザインするの? 2-1. ベースカラーの選択(シンプルカラー12色) 2-2. ヘッダーのルール  >>補足:グラデーションによるフェイドアウトのやり方 2-3. ボディのルール 2-4. Yahoo! JAPAN ロゴのルール 3. オススメ:より「ぴったりな」背景テーマを作るために
  • 3. 1. デザインを制作する前に 必ず、以下の内容を守ってご応募ください。 ・作品を制作する際には、必ず、公募概要ページ(http://www.loftwork.com/blog/pickup/myyahoo/ )で配布されているPSD形式のテンプレートファイル(12種類)のどれかを使用して制作してください。 ・作品応募時はJPEG、PNG、GIFいずれのファイル形式で、1枚の画像を提出してください。採用決定後は、PSD形式(CS4以下)でレイヤーが分割された状態のファイルをご提出いただきます。  制作時に使用したPSDファイルは、レイヤーを統合せず取っておいてください ・必ず、公募概要ページ内の「応募方法」に沿ってご応募ください。特に、応募用の「テーマタグ」を入力することを忘れると、応募が完了しませんので、ご注意ください。 ・公募概要ページ内の「許諾事項」を必ずお読みください。
  • 4. 1-1. My Yahoo! とは? My Yahoo! と 背景テーマ My Yahoo!は、自分専用のページを作れる日本最大のカスタマイズサービスです。Yahoo! JAPANのサービスやコンテンツ、アプリ、およびインターネット上のブログや各種ニュースサイトのRSSなど、好きな情報を組み合わせたあなただけのページを作ることができます。     My Yahoo!で実際にカスタマイズを体験してみる http://my.yahoo.co.jp/  そして、My Yahoo! では、背景テーマを選択することでページデザインを自分好みに変えることができます。 今回つくるのは、 この背景テーマの デザインだよ!
  • 5. 2. どこをデザインするの? デザインするのは、黄色く色のついた要素のみです。 めやすとして、ヘッダー画像+ボディ画像1枚で40KBになるように制作してください。 ダミーコンテンツ + My Yahoo! ロゴ ※ 編集不可 ヘッダー + コピーライト(任意) MY Yahoo! ボディ コンテンツの 中身はデザイン 対象外だよ コンテンツの要素の色を12色のベースカラーから選択します
  • 6. 2-1. ベースカラーの選択(シンプルカラー 12色) 「シンプルカラー」12色の中からお好きなベースカラーを選んで、公募概要ページ (http://www.loftwork.com/blog/pickup/myyahoo/)よりテンプレートをダウンロードしてください。 ダミーコンテンツ、Yahoo! JAPANロゴ、フッター部分は編集不可です。 My Yahoo!スタイル ブルー ピンク オレンジ グリーン グレー パープル アクアブラック クリアミント シンプル シンプルブラック チェリーピンク
  • 7. 2-2. ヘッダーのルール ・サイズ  - 横幅970~1280 pix  - 縦幅132 pix ・「(C)作者名」を入れることができます。   中央よりも右側で、ダミーコンテンツやテキストなどと重ならない箇所に入れてください。 ・デザインパターンは以下のA・Bのどちらかを選びます。 132pix (C)loft-taro 970~1280pix パターンB: くりかえし 画面幅いっぱいに、同じ画像がくりかえしで表示されます パターンA: 1枚絵(固定) 1枚絵で固定された絵が表示されます。画面幅がヘッダーの画像幅超えると、左右にヘッダー部分の背景色が現れます。 NG例:規定サイズ内で大きく切れてしまうデザイン どうしても切れてしまう場合は、切れ目にグラデーションを入れてフェードアウトしてください。(詳細は次ページ参照) NG例:Yahoo! ロゴと大きく重なるデザイン 画像がYahoo! のロゴの後ろに重なり、ロゴの視認性が悪くなってしまいます。 × × My Yahoo! ×
  • 8. 補足:グラデーションによるフェイドアウトのやり方 規定サイズ横幅970~1280pix × 縦幅132 pixの中で、どうしても、デザインを切りたい場合は、切れ目にグラデーションを入れてぼかしてください。 例) 横幅970pix (C)loftwork 切れてしまっている (C)loftwork グラデーションでぼかす
  • 9. 2-3. ボディのルール C・Dどちらかのパターンで作成してください。 パターンC: ワンポイント(固定) フッターの上に、ワンポイントでデザインを入れることができます。 パターンD: タイリング(全面) ページ全面に、同じ画像がくりかえしで表示されます。タイリングのサイズ規定は特にありません。 ワンポイントの 場合は、背景色も 入れてね 一枚の画像を全面で繰り返す (実際は継ぎ目は見えません)
  • 10. 2-4. Yahoo! JAPAN ロゴのルール ちゃんと 守ってね
  • 11. 3. オススメ:より「ぴったりな」背景テーマを作るために 実際にMy Yahoo!を使って、様々な背景テーマを試しながら、研究しましょう。 http://my.yahoo.co.jp/ 「My Yahoo! の設定」から、様々な背景テーマを 試すことができます。「シンプルカラー」では 12色のベースカラーを実際に試すこともできます。