週刊Webテク通信

2014年10月第2週号 1位は,Bootstrapの究極の入門ガイド,気になるネタは,LINEで口座残高を照会へ、銀行と友だちになってスタンプで情報交換

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2014年9月29日~10月5日の間に見つけた記事のベスト5です。

1. The ultimate guide to Bootstrap | Webdesigner Depothttp://www.webdesignerdepot.com/2014/10/the-ultimate-guide-to-bootstrap/

Bootstrapの究極の入門ガイドです。Bootstrapがどういうものかの解説から始まり,プラグインやエクステンション,コンポーネントの紹介,実例紹介まで膨大な情報量をまとめた記事です。

Bootstrapをオススメするポイントとして掲載されていた項目を以下に紹介します。

  1. 使いやすい
  2. グリッドシステムである
  3. 開発スピードが速くなる
  4. ベースのスタイルが用意されている
  5. デザインされたコンポーネント(ドロップダウン,ナビゲーションバーなど)が用意されている
  6. JavaSriptを使ったコンポーネント(モーダルウィンドウ,ツールチップなど)も用意されている
  7. きちんとしたドキュメントがある
  8. ほかのフレームワークや自作のCSSなどと統合しやすい

図1 Bootstrapの究極の入門ガイド

図1 Bootstrapの究極の入門ガイド

2. 新潮流は超シンプル! Webメディアサイトにおける4つの「デザイン」トレンド | インフォバーン総研ーヒトのココロを動かす デジタルコミュニケーション戦略ー | インフォバーンhttp://www.infobahn.co.jp/ib_column/4211

Webメディアにおけるデザインのトレンドを4つにまとめて紹介しています。

  1. PCサイトでもスタンダードとなるか? ハンバーガーメニュー
  2. 記事詳細はシングルカラムレイアウト
  3. 読んでいる記事タイトルを常時表示させておく
  4. 誰が書いた記事かを印象的に見せる

図2 Webメディアにおけるデザインのトレンド

図2 Webメディアにおけるデザインのトレンド

3. 10 HTML5 Tools For Speed Up Development | SmashingApps.comhttp://www.smashingapps.com/2014/10/03/10-html5-tools-for-speed-up-development.html

Web開発のスピードアップに役立つツールのまとめ記事です。

HTML5の開発のためのツールというわけではなく,HTML5で開発されたオンラインツールを紹介しているという意味でした。

図3 Web開発のスピードアップに役立つツールいろいろ

図3 Web開発のスピードアップに役立つツールいろいろ

4. Top 10 Sources of Inspiration for a Web Designer | TeslaThemeshttp://teslathemes.com/blog/top-10-sources-of-inspiration-for-a-web-designer/

Webデザイナーが刺激を受けたり参考にできる情報を提供しているサイトを紹介しています。

デザイナー向けのソーシャルメディアやデザインギャラリー,Webデザイナー向けのブログなどが掲載されていました。

図4 Webデザイナーのための情報源10選

図4 Webデザイナーのための情報源10選

5. Best Illustrated Websites 2014 | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/09/illustrated-websites-2014/

イラストを使ったWebデザインのギャラリーです。

フラットデザインにベクターベースと思われるシンプルなイラストが組み合わされているものが多いですね。

図5 イラストを使ったWebデザインのギャラリー

図5 イラストを使ったWebデザインのギャラリー

そのほか,最近の記事の中から,気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

reEmbed ? Custom YouTube Video Playerhttps://www.reembed.com/

reEmbedは,YouTubeの動画プレイヤーの,デザインや色をカスタマイズできるWebサービスです。プレイボタンやボリュームなどの付いたバーの部分を変更できます。

プレイヤーのバーは,あらかじめ用意されている6つのスタイルから選択します。バーの背景色,ボタン類の色,テキストなどの色は自由に変更可能です。

そして,ロゴ画像を動画の上に重ねることができます。透過PNGで作った画像なら,ちゃんと透明部分は抜けて合成されました。画像をアップロードしたあとで,サイズや位置の調整ができるのも便利です。

プレイヤーのカスタマイズが完成すると,JavaScriptのコードが生成されるので,そのコードを自分のブログやサイトに入れるだけです。個別の動画に対してカスタマイズするのではなく,そのコードを入れると,ページ内の全てのYouTube動画のコントローラーが変更されるわけです。

ブログのテンプレートにこのコードを入れれば,全ての記事のYouTube動画全てに反映されます。

他人の動画にも勝手にロゴなどを入れてしまえるのはどうかという気もしますが,プリクラ風のフレームを動画に付けるなど,アイデア次第で面白い使い方もできそうです。

図6 YouTubeの動画プレイヤーをカスタマイズできるサービス

図6 YouTubeの動画プレイヤーをカスタマイズできるサービス

今週の気になるWebネタ

LINEで口座残高を照会へ,銀行と友だちになってスタンプで情報交換 | アプリオhttp://appllio.com/20141005-5766-line-bank

LINEで金融機関と友達になり,入出金があるとメッセージが届いたり,口座残高を照会できたりするサービスが提供予定だそうです。日経新聞だけが報じている段階ですが,2015年春の実施を目指し,システムはNTTデータが提供するとのことでした。

LINEに機能が追加されるわけでなく,LINEビジネスコネクトを利用したシステムをNTTデータが開発するというわけですね。LINEビジネスコネクトにより,LINE公式アカウントの各種APIを利用して自社データベースと連携するような,この手のサービスが作れるようになっています。

まずは資金移動を伴わないサービスでスタートするようですが,将来的には振込などへの対応も視野に入れているようです。LINEアプリ側にも協力してもらって,認証時にiPhoneの指紋認証が使えるようになると,セキュリティ的により安心できると思います。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入