週刊Webテク通信

2014年12月第1週号 1位は，Webサイトを開発するのに必要な12のスキル，気になるネタは，iPadが募金箱に 「Square」で寄付を募る「SWIPE for the world」

Webテク, Webデザイン, Web広告, CSS, WordPress, マークダウン記法, iPad, 寄付

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2014年11月24日～30日の間に見つけた記事のベスト5です。

1. 12 Skills You Need to Develop a Website http://www.onextrapixel.com/2014/11/25/12-skills-you-need-to-develop-a-website/

Webサイトを開発するのに必要な12のスキルを紹介した記事です。Webデザインではなく開発系の人向けですが，サイト制作に関わっている人には共通する部分も多いと思います。

  1. プログラミング
  2. 学習
  3. 検証
  4. 基礎的なデザインの知識
  5. SEO
  6. 一般的なセキュリティ対策
  7. 画像のリサイズと加工
  8. 意思決定
  9. 自信
  10. 我慢と忍耐
  11. 時間管理と綿密な計画
  12. 怠惰

最後の「怠惰」は，有名なフレーズ「プログラマーは怠惰であれ」でおなじみの言葉です。ちょっとでも面倒なことはコンピューターに自動でやらせようという発想を常に持って，楽をするために努力をせよということですね。

図1　Webサイトを開発するのに必要な12のスキル

図1　Webサイトを開発するのに必要な12のスキル

2. 8 Challenging Web Design Trends of 2015 http://www.designzzz.com/web-design-trends-2015/

2015年に向けてのWebデザインのトレンドを8つ紹介しています。

  1. モバイルファーストなレスポンシブ
  2. 柔軟性のあるタイポグラフィ
  3. ゴーストボタン（枠だけのボタン）
  4. フラットデザインの強化
  5. タイル／カードベースのデザイン
  6. 大きな画像
  7. モバイルフレンドリーなUI

あれ，7つですね。最後の「結論」を加えて8つなんでしょうか。

図2　2015年のWebデザインのトレンド

図2　2015年のWebデザインのトレンド

3. 40 Beautiful and Effective Responsive Navigation Menus - Vandelay Designhttp://www.vandelaydesign.com/inspirationalnavigation-menus/

レスポンシブなナビゲーションメニューの実例を多数紹介しています。

三本線の「ハンバーガーアイコン」によってメニュー現れるものが多く，ヨコから出現するパターンとタテに展開するものとがありました。

また，ウィンドウ幅が狭まったときに水平メニューが隠れてハンバーガーメニューになる場合と，どのサイズでも常にハンバーガーメニューのものとに分かれます。

図3　レスポンシブなナビゲーションメニューいろいろ

図3　レスポンシブなナビゲーションメニューいろいろ

4. 10 Useful CSS Snippets For Web Developershttp://www.hongkiat.com/blog/simple-css-snippets/

CSSのちょっとしたテクニックの数々を，サンプルコードとともにまとめた記事です。

垂直方向のセンター揃えや，リンク先のフォーマットによって違ったアイコンをつける方法などが掲載されていて参考になります。

図4　CSSのちょっとしたテクニックの数々

図4　CSSのちょっとしたテクニックの数々

5. 30 Beautiful Blue Websites for Design Inspirationhttp://line25.com/articles/30-beautiful-blue-websites-for-design-inspiration

青色をベースとしたWebデザインのギャラリーです。

Webデザインでよく使われている色ですし，落ち着いた印象を与えますね。

図5　青色をベースとしたWebデザインのギャラリー

図5　青色をベースとしたWebデザインのギャラリー

そのほか，最近の記事の中から，WordPress関連の話題を3つ紹介します。

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

10 Free Online Markdown Editorshttp://sixrevisions.com/tools/online-markdown-editors/

今回は，オンラインのマークダウンエディタを10個紹介した記事を取り上げます。マークダウン記法は覚えてしまえば簡単ですが，まずはエディタを使って慣れていくのがいいと思います。その場合，オンラインエディタだと気軽に試せて便利ですね。

DillingerのようにHTMLに書き出す機能のあるエディタを使えば，Web制作のときにも活用できると思います。

機能的にはどのエディタもそれほど差がないと思いますが，この記事によるとStackEditかDillingerがオススメのようです。Google ドライブやDropboxなどと連携しているものもあるので，オンラインストレージの好みから選ぶのもいいかもしれません。

図6　オンラインのマークダウンエディタ10選

図6　オンラインのマークダウンエディタ10選

今週の気になるWebネタ

iPadが募金箱に 「Square」で寄付を募る「SWIPE for the world」 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1411/25/news125.html

スマートフォン／タブレットを使ったクレジットカード決済サービスのSquareを使った寄付が始まったようです。Squareを知らない人にはあやしげに見えるかもしれませんが，店舗内で行うということなので信頼されそうですね。この企画はSquareの知名度アップにつながりそうです。

Squareの知名度が上がれば，街頭での募金もSquareで行うというのもアリかもしれません。もっとも，今回のこの企画では本来Squareが取る手数料も寄付されるそうですが，勝手に行う寄付では手数料が取られることがデメリットになりますね。

便利になるとともに悪用しようという人も出てきそうで，Square募金詐欺などが発生しないかと不安にもなってきます。Squareで悪さをしても，犯人はSquareユーザーということですぐに特定できそうですが，いろいろと抜け道はあるのかもしれません。

Webテク, Webデザイン, Web広告, CSS, WordPress, マークダウン記法, iPad, 寄付

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote