ネットで見かけたWebテク
1. Creating Great Websites By Designing For Emotionhttp://www.onextrapixel.com/2016/03/03/creating-great-websites-by-designing-for-emotion/
良いWebサイトを作るための、
感情が企業とお客をつなぐとのことで、
- 感情に訴えるデザイン
- 感情を刺激するには
- Webデザインに感情をもたらす
- 感情を作り出すための手順
- 感情は常に快いものではない
- 感情に訴えるデザインで最も重要な要素
![図1 良いWebサイトを作るための感情に訴えるデザイン 図1 良いWebサイトを作るための感情に訴えるデザイン](/assets/images/design/clip/01/weekly-web-tech/201603/10/thumb/TH800_001.png)
2. The Seven Best Strategies For Using Photos in Web Interfaceshttp://speckyboy.com/2016/03/07/strategies-using-photos-web-inerfaces/
Webのインターフェイスに写真を使うための戦略を解説しています。
以下の7つの項目で、
- メインビジュアル
- 現実感のある物体
- 白黒写真
- 色をかぶせた写真
- 小さな写真の組み合わせ
- 特別なフォントや言葉
- 写真の加工
![図2 Webインターフェイスに写真を使うための戦略 図2 Webインターフェイスに写真を使うための戦略](/assets/images/design/clip/01/weekly-web-tech/201603/10/thumb/TH800_002.png)
3. Free Bootstrap PSD Grids for Crafting Excellent Website Designs - Designmodohttp://designmodo.com/bootstrap-grid/
BootstrapベースのWebデザインに便利な、
まずはPhotoshopでデザインをするという人に役立ちそうですし、
![図3 Bootstrap用グリッドのPSD素材いろいろ 図3 Bootstrap用グリッドのPSD素材いろいろ](/assets/images/design/clip/01/weekly-web-tech/201603/10/thumb/TH800_003.png)
4. 9 Free Cross Browser Testing Tools | SmashingApps.comhttp://www.smashingapps.com/2016/03/03/9-free-cross-browser-testing-tools.html
各種ブラウザでの表示チェックを無料で行えるWebサービスとツールを、
無料のサービスの場合、
![図4 無料のブラウザ表示チェックサービスとツール 図4 無料のブラウザ表示チェックサービスとツール](/assets/images/design/clip/01/weekly-web-tech/201603/10/thumb/TH800_004.png)
5. Hamburgers by Jonathan Suhhttps://jonsuh.com/hamburgers/
アニメーションするハンバーガーメニューのCSSを提供しています。
クリックすると閉じるボタンや戻るボタンにアニメーションして変化するハンバーガーメニューが多数用意してあり、
![図5 CSSでアニメーションするハンバーガーメニュー 図5 CSSでアニメーションするハンバーガーメニュー](/assets/images/design/clip/01/weekly-web-tech/201603/10/thumb/TH800_005.png)
そのほか、
「Googleで支払います」 と言うだけで決済できる 「Hands Free」 アプリのテスト開始 - ITmedia ニュース
店のレジ端末と客の端末をBluetoothでつなぎ、イニシャルと顔写真とで認証するそうです - アップル公式サポートがTwitterアカウント開設、
便利さから速くも大人気に。寄せられる質問を次々捌く - Engadget Japanese
ツイッター上のアップル製品全般の公式サポートデスクが人気とのこと - WebサイトビルダーのWeeblyがeコマース機能の次にメールマーケティングのプラットホームを開設 | TechCrunch Japan
メールマーケティング機能だけでも使えるようになる予定です
先週の気になるWebサービス
What is your dog?https://www.what-dog.net/
マイクロソフトが提供する、
犬の写真をアップすると、
そして面白いのが、
![図6 犬種を調べたり写真と似た犬を探せるサービス 図6 犬種を調べたり写真と似た犬を探せるサービス](/assets/images/design/clip/01/weekly-web-tech/201603/10/thumb/TH800_006.png)