WEB

WEBサイトをつくってみたい 第6回「CSSフレームワークを利用してみましょう!」

目次 ・そもそもフレームワークって何? ・CSSフレームワークを使うメリット・デメリット ・基本的な利用方法 ・代表的なCSSフレームワーク5選 - Bootstrap - Foundation - Pure.css - Semantic UI - Material-UI ・まとめ

そもそもCSSフレームワークって何?

フレームワーク自体は一般的な機能をまとめたものをユーザーが自分の要件に合うように加筆・修正・上書きなどを行い特定の機能などを持たせることが出来るベースとなるもの。 という考えらしい。文字にすると小難しい考えに感じますね。(ヾノ・∀・`)ムリムリ では、CSSフレームワークとは? 簡単にいうと、普段cssでレイアウトやデザインを行いますが、このCSSフレームワークを利用するとhtmlタグに特定のclassをつけたりすると、思い通りのレイアウトになったりボタンが装飾されたり、テキストが中央寄せになったりします。 凄いですね!!これだけでも作業時間の短縮ができそうです。

CSSフレームワークを使うメリット・デメリット

メリット

コーディングルールの統一化

何人かでコーディングをするような製作の場合、人それぞれに癖があるため、どうしてもコーディングルールがバラバラになるといったことが考えられますが、フレームワークを使うことでHTMLタグにつけるclassやCSSのルールが統一されるといったメリットが挙げられます。

作業時間の短縮

ある程度、コンポーネントが初めから揃っているので、CSSでスタイルをあてる手間がはぶけます。

メンテナンス性の向上

コーディングルールがある程度決まっているので保守性にすぐれています。 あとからの制作した人物以外が修正や拡張などするときにもフレームワークのルールさえ知っていれば短時間で修正等が行うことができます。

デメリット

class名が長くなり可読性が落ちる

大体のCSSフレームワークでマルチクラスを採用しているため、PCのときは3カラムで、タブレットのときは2カラムにして、モバイルのときは1カラムなどと指定すると結構な長さのclass名になってしまいます。

思いもよらないところでcssのスタイルがあたってしまう

CSSフレームワークは汎用的なclass名を使用していることが多いので、気付かずに使ってしまっていると表示確認をした際にあれ?おかしいなということに遭遇します。

デザインが似たものになってしまう

既存のコンポーネントをそのまま使用していると、どうしても同じCSSフレームワークを使っている他サイトと同じような雰囲気になってしまうことも場合があります。

基本的な利用方法

  1. 利用したいフレームワークのサイトより一式をダウンロードします。。ほとんどのサイトがわかりやすい位置にDownloadわかりやすい位置にボタンを配置しているので迷わないはずです。
  2. 落としてきたファイル一式の中に含まれるcssを で読み込ませます。
  3. 各フレームワークのDocumentに沿ったグリッドシステムを利用する。

代表的なフレームワーク5選

Bootstrap

https://v4-alpha.getbootstrap.com/ CSSフレームワークといえば、Bootstrapというくらい有名なフレームワークです。 twitter社で開発されたフレームワークです。 名前は聞いたことがある方も多いのでは。 最新バージョンは4.0.0になっています。 旧バージョンからの変更点はコチラのcoliss様のサイトでわかりやすく説明しておられます。 http://coliss.com/articles/build-websites/operation/work/migrate-from-bootstrap3-to-bootstrap4.html

Foundation

http://foundation.zurb.com/ こちらも人気の高いCSSフレームワークのZURB社の「Foundation」。 WordPressのテンプレートに多く使われていたり、有名企業がコーポレートサイトで使用しているようですね。

Pure.css

https://purecss.io/ yahoo!が開発されたCSSフレームワークです。 BootstrapやFoundationと比べると軽量です。 ですが、必要十分な機能は備わっています。

Semantic UI

https://semantic-ui.com/ Semanticの名の通り、class名に意味を持たせてわかりやすくなっています。 このスタイルにするときのclass名はなんだっけ?と調べる必要も少なく、学習コストも低いCSSフレームワークと言われています。

Material-UI

http://www.material-ui.com/#/ マテリアルデザインでサイトを作成したい方にうってつけのフレームワークとなっているMaterial-UI。 Googleが提唱するMaterial Designを踏襲したデザインのフレームワークになっています。

まとめ

全部入りのBootstrapのようなフレームワークと必要最低限の装備の軽量フレームワークに分かれてきている感じがします。 自分の作りたいサイトや要件に合ったデザインや機能によって選択すると思われますが、上記に挙げたフレームワーク以外にもたくさん種類がありますので、 是非とも自身の目的にあったCSSフレームワークを探してみてはいかがでしょうか。

北海道地方自治体のWEBサイトを見てみよう第7弾!~十勝地方編~

年に1度、ワインを楽しむ・買うために道内を旅します、どうもエンジニアの吉舌です。 池田町のワイン城から始まり、富良野を経由して山崎ワイナリー・宝水ワイナリー・10Rワイナリー・マオイワイナリーと巡って札幌に帰ってきます。 今回は私のワイン旅の最初の目的地である池田町を含む十勝地方の自治体WEBサイトを紹介していきたいと思います。  

池田町

http://www.town.hokkaido-ikeda.lg.jp/ 真っ先に紹介したいのがワイン城のある池田町のWEBサイトです。 池田町は町営でブドウ栽培・ワイン醸造を行っているだけあって、WEBサイトでもブドウをイメージしたデザインになっています。 最近ではとにかく目立つサイト、インパクトのあるサイトなどユーザーの印象に残るように工夫されたサイトが多いですが、私はこういったシンプルにすっきりまとまったサイトが大好きです。 特に自治体で多く見られるバナーがないのがとても好印象です。 バナー自体は悪いものではないのですが、バナーのデザインにも一貫性を持たせないとどうしても雑多な印象を与えてしまいがちですからね。 なんと!左サイドバー下部にページをリスト管理することができる「マイリスト」が存在しています! 素晴らしいですね!と言いたいところですが、このWEBサイトにリストで管理するほどのコンテンツがあるのでしょうか。いや、ない。(反語) ユーザに配慮した機能を取り入れるという試みは素直に素晴らしいと思いますが、その機能が本当に求められているのか、ユーザの問題を解決するために有効なのかの見極めをしっかり行う必要がありますね。  

帯広市

http://www.town.hokkaido-ikeda.lg.jp/ 十勝唯一の市である帯広市のホームページです。 ページ中央にある各ページへのリンクですが、正直に言うと酷いです。 なぜこんなバナーのようなリンクにしてしまったのか。。。 使っている色の数が多すぎて目がチカチカする上に統一感もないので非常に残念な仕上がりとなっています。 また、画面上部にある検索を使用するとGoogle検索に遷移してしまいます。 独自の検索ページを用意できなかったのでしょうか。 全体的にデザインがしっかりとされていない印象を受けてしまうため、個人的にはリニューアルが待ち遠しいサイトです。  

陸別町

https://www.rikubetsu.jp/ 続いて紹介するのは日本一寒い町、陸別町のWEBサイトです。 フラットデザインで構成され、日本一寒い町の名に恥じない寒色をメインにしたデザインは統一感があって素晴らしいですね。 また、画面上部には今期の最高気温・最低気温が表示されており、いかに寒暖の差が激しいかということを伝えています。 全体的に素晴らしい出来なのですが、強いて言えば「移住のご案内」ページの画像が各ページのタイトル画像を使いまわしているので、説明文が小さくなりすぎて読みづらい点でしょうか。  

鹿追町

https://www.town.shikaoi.lg.jp/ 続いては鹿追町のWEBサイトです。 全体的にすっきりとしたデザイン、大きめのフォントサイズに太い書体でとても見やすいWEBサイトです。 自治体のWEBサイトのユーザは老若男女様々な人が想定されるので、非常にユーザのことを考えられていますね。 下層ページでは文字が主体になっているのでもう少し画像を使用して視覚的なユーザビリティが欲しいところですが、問題解決のために訪れたユーザにとっては余計な情報がないので分かりやすいとも言えるでしょう。  

広尾町

http://www.town.hiroo.hokkaido.jp/ 今回最後に紹介するのが広尾町のWEBサイトです。 この画像、決してスクリーンショットに失敗したわけではありません。 今ではめったに見かけることがなくなりましたが、中央寄せではなく左寄せのサイトなのです。 更に!iframeによる新着情報表示、サイドバーに表示されているアクセスカウンター、どちらも非常に懐かしさを感じさせますね。 私が初めてインターネットでWEBサイトを見た頃がこんな感じだったと思います。 とは言えそれは10年以上も前の話。2017年においてこのサイトは時代遅れと言わざるを得ません。 自治体のサイトなので更新自体は行われているようですが、早めのリニューアルを期待したいところですね。   いかがでしたか。 今回紹介した十勝地方には1市16町2村と、なんと合計19市町村もあったので紹介できたのはほんの一部となってしまいました。 十勝地方はまさに「北海道」といった自然溢れる地方なので、道外の方が北海道らしさを味わいたい時には訪問リストのトップに載せて欲しいと思います。

北海道地方自治体のWEBサイトを見てみよう第6弾!~日高地方編~

先日クロスバイクを買いました、どうもエンジニアの吉舌です。 漫画「弱虫ペダル」が流行った時には買おうとも思いませんでしたが、これからは運動不足解消の為に自転車で移動しようと思っています。 さて、前回の記事「北海道地方自治体のWEBサイトを見てみよう第5弾!~渡島地方編~」から少し間が空いてしまいましたが、今回も張り切って自治体のサイトを紹介していきたいと思います。  

日高町

http://www.town.hidaka.hokkaido.jp/ 日高地方の自治体の紹介なので当然この町、日高町の紹介から始めていきましょう。 最近、と言っても数年前からの流行であるメインビジュアルのスライダーを用いていますが、キャッチコピーを重ねることでリンク先の内容が分かりやすいのでとても良い導線を用意しています。 と、言いたいところなのですが2017年5月16日現在ではリンク先が指定されていません。 なんてことでしょう。とてつもなく勿体ないですね。 ビジュアルのみを表示させるときにはインパクトを与えることができ、導線として使用するときはキャッチコピーを重ねるというセオリーを完全に無視してしまっています。 また、フラットデザインなのかマテリアルデザインなのか細部でぶれているので少し残念な印象を受けてしまいます。  

平取町

http://www.town.biratori.hokkaido.jp/ 続きましては平取町のホームページです。 このサイトは個人的には大好きなデザインです。 フラットデザイン・タイルレイアウトで構成されており、自治体のサイトにありがちな「トップページはこだわっているけど下層ページが酷い」状況に陥っていません。 欲を言えば「ニュース」や「トピックス」が少し簡素過ぎるので、もう少し可読性を意識しつつタイルレイアウトを用いることが出来ていればなぁと思いました。 あとは「移住情報」でしょうか。 そこまで手が回らなかったのかもしれませんが、人口減に歯止めをかけるために住民の誘致を狙うのであれば重要なページなのでもう少し力を入れて欲しいところではあります。  

新ひだか町

http://www.shinhidaka-hokkaido.jp/ 日高町とは別の町、新ひだか町のWEBサイトです。 デザイン的には綺麗にまとまったサイトだと思います。 「新ひだか町 滞在・移住ナビ」のページについても基本レイアウト・テイストを揃えつつメインビジュアルを大きくすることで、町の特長を目立たせることに成功していると思います。 ですが、制作側の視点で見てみると下層ページのURLが酷いです。 「http://www.shinhidaka-hokkaido.jp/taizai_ijunavi/category/」までは良いのですが、そこから続くのが「1.html」「2.html」「3.html」......と少々手抜きではないかと感じてしまいます。 また、2017年5月16日時点では春をイメージした桜を用いたデザインになっていますが、夏はどうなるのでしょう。少し気になりますね。  

えりも町

http://www.town.erimo.lg.jp/ 歌手の森進一が「襟裳の春は何もない春です」と歌った襟裳岬があるえりも町のWEBサイトです。 えりも町はやはり岬や海がメインなので、サイト全体が海・水を連想させる色使いで統一されています。 グローバルナビの下にあるイベントカレンダーで町内のイベントを見ることが出来ます。 たいていのWEBサイトのカレンダーは表示が小さくて使いづらいのですが、このように横に長く表示されていれば使いやすいですよね。 観光のページ「風のまち「えりも」観光ナビ」では、今度は風がテーマなので緑を基調としたデザインとなっています。 メインのページと観光のページでレイアウトを統一していながら、テーマによる色の変更で違いを生みだすテクニックはもはや定番なのでしょうか。   いかがでしたか? 個人的にはお馬さんが大好きなので日高地方に行くことが多いのですが、自然に興味のない人はあまり縁がない地方ですよね。 でもそんな人も行きたくない気持ちを押し殺して一度観光に行ってみてください。 きっと清々しい気持ちになれるはずです。

コンテンツマーケティングの基本を学ぶためにおすすめの書籍3選

『予算はあまりないけど熱意はある』という方にとって、コンテンツマーケティングほど適した施策はないでしょう。 今回は、コンテンツマーケティングの基本と具体的な施策を学べる書籍をいくつかご紹介します。

1.『中小企業が今すぐできるWEBマーケティング大全』

こちらは株式会社FREE WEB HOPEの相原祐樹氏が配信しているPDFです。コンテンツマーケティングはもちろん、ランディングページの作り方などウェブで結果を出すことに焦点を当てた本です。フェーズごとの施策の狙いと、実際にどのように行動すべきかが明快にまとめられています。 情報量が適量で読みやすく、それほど時間をかけずに全体像と具体的な方法論がつかめます。コンテンツマーケティングの概要をつかむためには、まずは当書籍を読むと良いでしょう。

2.『いちばんやさしいコンテンツマーケティングの教本』

2冊目は『いちばんやさしいコンテンツマーケティングの教本』です。さきほどの『中小企業が今すぐできるWEBマーケティング大全』よりボリュームがあり、フェーズごとに深く広い知識が得られます。 とくに解析と提案部分が具体的だったので、自社での運用に応用できそうです。  

3.『金がないなら頭をつかえ 頭がないなら手を動かせ』

最後に『金がないなら頭を使え 頭がないなら手を動かせ』です。永江一石氏の著書です。言うまでもなく、永江さんはブログで有名な方ですね。コンテンツ運営の生の声を、若干の毒とともに語ってくれています。

まとめ

3冊ともそれぞれ切り口が違うので、すべて読んでみることをおすすめします。 時間が無い方は、一番最初に掲載した『中小企業が今すぐできるWEBマーケティング大全』を読んでみてください。コンテンツマーケティングがどのようなものかつかめて、すぐに行動にうつせます。

WEBサイトを作ってみたい 第5回「バリデーションツールでサイトを検証しましょう。」

PS4のFPSゲームに見事にはまって、下手クソな動画をPS4からyoutubeにUPしてみました。(※もちろん一般公開はしていません。(^_^;))菅原です。 今回はいよいよWEBサイト製作も大詰め、自分で記述したHTMLのソースを検証してみましょう。 私自身も、完璧と思っていたHTMLのソースコードが結構間違っていたなんてことは多々あります。 自分で見直すことも大切ですが、便利なツールもあるので活用しない手はないです! 目次 ・バリデーションとは? ・バリデーションツール ・まとめ

バリデーションとは?

直訳すると”検証”という意味です。 IT用語で言うと、”妥当性”という意味もあるようです。 まとめると、規定された文法に則っているか、仕様にあっているかを検証するといった意味のようです。

バリデーションツール

機械的にバリデーションを行ってくれるツールがあるので紹介させていただきます。 The W3C Markup Validation Service https://validator.w3.org/ HTMLの規格を行っている、非営利団体であるWorld Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)通称W3C(ダブリュ・スリー・シー)から無償で提供されているバリデーションツールでございます。 検証方法は3通りあります。
  • URLを入力する
  • HTMLファイルをUPする
  • HTMLソースコードを貼り付ける
公開前のWEBサイトではファイルをUPするか、ソースコードを貼り付けるのどちらかで検証する形が多いですね。 では早速、弊社のコーポレートサイトを検証してみましょう。 おや?エラーがでていますね。(・д・)チッ 調べてみると、どうやらWordPressのプラグインが原因のようです。 エラーは後で直しましょう。゚( ゚д゚ )クワッ!! ちなみにエラーがない場合は、このようにグリーンで表示されます。 エラー以外では"WARNING"の表示もされることがあります。重要な欠陥ではありませんが、現状の規格に沿っていない、または現在推奨されないといったような感じのようです。 出来る限り直しましょう。

まとめ

HTMLといってもやはり人間のすることなので、ミスが結構あったりします。 バリデーションツールを使うことで品質保証されるといった意味もありますので、是非使用していきましょう。

WEBサイトを作ってみたい 第4回 「クロスブラウザチェック!」

GWは満喫できましたか? 北海道はちょうどGW頃に桜の見頃となることが多いため公園などでは、お花見で賑わいます。 あえてお花見をしなくても、通勤途中などで桜が満開になっているのを見ると気持ちがウキウキしますよね。 GW初日に首を寝違えて3日間ロクに首が動かなかった菅原です。 第4回目の今回はWEBサイトを作ったあとの重要なタスクである「クロスブラウザチェック」についてです。 目次 ・クロスブラウザチェックとは ・チェックするブラウザ ・気をつけること ・まとめ

クロスブラウザチェックとは

WEBサイトを作成した後に色々なブラウザで表示を確認する「クロスブラウザチェック」は非常に大切なことです。 Chrome、IE、edge、Firefox、Safariなどで表示を確認した際に、「あれ?このブラウザでは表示が崩れている…。」ということが多々あります。 そのようなことが無いように色々なブラウザでチェックをすることを「クロスブラウザチェック」または「クロスブラウザテスト」と言われています。

チェックするブラウザ

WEBブラウザはメジャーなものからマイナーものまであるので、どこまでチェックすればいいのかということになりますよね。

PC

PCのWEBブラウザのシェアを確認してみます。 下記のサイトを参照させていただきます。 https://syncer.jp/Web/Browser/ シェアから推察すると、Chrome、IE、edge、Firefox、Safari の5つのブラウザをチェックすれば良いようです。

モバイル

スマートフォンはどうでしょう? https://syncer.jp/Web/Browser/#section-2 Chrome、Safari、Androidブラウザをチェックすれば、ほぼカバーできそうです゚(≧▽≦)。

気をつけること

  • 同じブラウザでもVer.が違うと表示が崩れる場合がある。(PC、モバイル共通) cssでの認識の違いが原因と思われるので、下記サイトなどを利用することで、対処できることもあります。 Can I use... Support tables for HTML5, CSS3, etc
  • それぞれのブラウザの仕様をある程度把握しておく。(Firefoxのpaddingの認識について等)
  • PC上でモバイル表示をさせてチェックできるサービスもありますが、最後には必ず実機確認をしましょう!
  • PCがWindowsなのでSafariが確認できない、逆にmacなのでIEとedgeが…という方に下記の様なサービスがあります。 本来は実機で確認したいところですが、そうも行かない場合もあると思いますので。 (ノ∀`)アチャー Browser Sandbox Browsershots

まとめ

作ることも大切ですが、作った後の確認も特に重要ですね。 どのブラウザで閲覧しても同じように表示されることを目標にしましょう。

北海道地方自治体のWEBサイトを見てみよう第5弾!~渡島地方編~

お花見がしたい。もっと言えばお花見という名目でお酒が飲みたい、どうもエンジニアの吉舌です。 北海道のお花見シーズンは5月ですが、ゴールデンウィークはまだ寒いことが多いのでお酒を飲まなきゃ凍えちゃいますよね。僕だけですか? 北海道地方自治体のWEBサイトを見てみようシリーズも遂に第5弾です。 最初は軽い気持ちで始めたのですが、北海道は地方別で14もあるのでまだ折り返してすらいませんね。 今回は「100万ドルの夜景」で有名な函館や難読地名で有名な長万部、新函館北斗駅がある北斗市などが属する渡島地方の自治体のWEBサイトの紹介をしたいと思います。  

函館市

http://www.city.hakodate.hokkaido.jp/ まずは函館市のWEBサイトからご紹介しますが、ぱっと見た感じよくある自治体のWEBサイトにしか見えません。 ですがページ下部を見て下さい!「函館市のホームページについて」の文字が見えますか!? どうやら函館市のWEBサイトには項目・機能を説明するページが存在するようです。 これを「親切丁寧」と捉えるか「説明が必要になるほど分かりづらい」と捉えるかはお任せしますが、少なくとも最近のWEBサイトでは直感的な操作が出来るようにユーザビリティを配慮している(する必要に気付いている)ことを考えればこのようなページは珍しい存在ではないでしょうか。 日付が「2015年2月19日」となっているのでそろそろWEBサイトのリニューアルでしょうか。 次回のWEBサイトに期待したいところです。  

北斗市

http://www.city.hokuto.hokkaido.jp/ 続いては2006年の市町村合併により新設された北斗市のWEBサイトです。 背景に北斗市の写真を表示させ、フラットデザインのアイコンを用いるなど随所に流行を取り入れた形跡があります。 ナビゲーションなどもシンプルでスッキリしており個人的に好きなデザインです。 広めのコンテンツ幅なので、下層ページに遷移した際にサイドバーが表示されていても狭く感じない工夫がされています。 余談ですが北斗市公式キャラクター「ずーしーほっきー」がとてもキモカワイイと思っています。  

松前町

http://www.town.matsumae.hokkaido.jp/ 綺麗なビジュアルに特殊なナビゲーションのこちらのサイトは松前町のWEBサイトです。 一般的に考えられている自治体のWEBサイトとは一線を画すこちらのサイト、下層ページを見てみてもテイストが統一されている反面、珍しく「観光情報」のページの方が一昔前のデザインをしています。 また、画像でも分かる通り最初の画面が表示された時にスクロールできるかどうか分からないデザインとなっています。 ですがそんな小さな点を除けば自治体のWEBサイトの中でもトップクラスにかっこいいWEBサイトと言えるのではないでしょうか。   いかがでしたか? 北海道新幹線が開業して1周年。渡島地方は以前より訪れやすくなったと思います。 各WEBサイトの観光情報から行きたい観光地を探してみるのもいいかもしれないですね。

北海道地方自治体のWEBサイトを見てみよう第4弾!~檜山地方編~

ようやく札幌も雪がなくなり春っぽくなってきましたね、どうもエンジニアの吉舌です。 札幌の夏の始まりの代名詞 YOSAKOIソーラン祭り まで2カ月を切ったと思うと、もう少し暖かくなってほしいところです。 北海道地方自治体の特集を始めて4回目となりましたが、過去の記事は見ていただけましたか? 見ていない方はこちらから見てくださいね! 北海道地方自治体のWEBサイトを見てみよう第1弾!~石狩地方編~ 北海道地方自治体のWEBサイトを見てみよう第2弾!~胆振地方編~ 北海道地方自治体のWEBサイトを見てみよう第3弾!~後志地方編~ さて、第4回となった今回は檜山地方の自治体のWEBサイトを見ていきたいと思います。  

今金町

http://www.town.imakane.lg.jp/ 今回最初にご紹介したいのが今金町のWEBサイトです。 数年前に流行った1画面にビジュアルを収めるフルスクリーンスタイルのエントランスページを用いて、行政情報とゆるキャラ「いまルン」が可愛い「いまCh.」というWebマガジンの2か所に誘導することを狙っているようです。 この「いまCh.」はポップな色使いで可愛らしいだけでなく、観光情報コンテンツが非常に豊富なので是非見て欲しいサイトです。 今金町のWEBサイト、制作視点で非常に惜しく感じる箇所が2点。 制作会社の環境ではモニターが高さ912pxだったのでしょうか、私のモニターではフッター下部にすき間が出来てしまっています。 また画面左上の「今金町」という文字が画像の色によっては見えにくくなってしまいます。 ですが制作側の視点には関係なく、コンテンツの量や使いやすさで考えれば非常に素晴らしいサイトと言えるでしょう。  

奥尻町

http://www.town.okushiri.lg.jp/ 続いてご紹介するのは北海道の南西端に浮かぶ海の幸の宝庫、奥尻町のWEBサイトです。 奥尻島全域からなる奥尻町ですので、海をイメージしたテイストが非常にマッチしていますね。 メニュー部分や背景だけでなく、メインビジュアル・バナー・イラストも海を意識したテイストで統一されています。 デザインが素晴らしいこのサイト、残念なのが各メニューから行けるページのデザインが文字をメインにしたものだということです。 この部分でも各リンクにアイコンやイラストを用いたデザインであれば本当に素晴らしいと言えたのですが、文字をメインにしてしまうと味気なくなってしまい、ユーザーが文字の中から希望のページを探さなくてはならなくなってしまうのでユーザビリティも損なわれてしまっているように感じます。  

せたな町

http://www.town.setana.lg.jp/ こちらは北海道随一の綺麗な海水浴が楽しめるせたな町のWEBサイトです。 柔らかい色使いやフラットアイコンを用いた非常にシンプルで素敵なサイトです。 全体的に文字が大きくてコンテンツを詰め込み過ぎていないので見やすいですよね。 上記のように少しデザインが崩れていますがそれは置いておくとしても、Googleカレンダーだけはもう少し何とかしてほしいところでした。 せっかく町内の行事がカレンダーから見ることができる素晴らしい機能なのに、文字が小さすぎるので使うユーザーが少ないのではないのでしょうか。     いかがでしたか? 今回は少し批判的な意見が多くなってしまいましたが、ただただ我々WEB制作会社の至らなさを感じてしまいます。 人の振り見て我が振り直せの言葉通り、同じ過ちを繰り返さないようにしたいと思います。

旅に関する優れたサイト3選

旅行が好きなコンです。そろそろ旅に出たくなってきました。バルト三国とか、北欧諸国に行ってみたいです。 さて、今回は旅に関する優れたサイトを3つ紹介します。

1.KOSHIKI STAY

http://koshiki-stay.jp/ 『なにもないこと』を上手にブランディングしています。写真をリズムよく配置していて、飽きずに読み進められます。各写真に配置する短めのテキストも秀逸で、ちょっとしたエッセイを読む感覚で気がつけばページの最後にたどり着いています。7日で20,000円だそう。正直、行ってみたい。  

2.『JAPAN - Where tradition meets the future』

http://visitjapan-europe.jnto.go.jp/en/ 日本を紹介するサイトです。日本を紹介する動画と、海外からの日本訪問者へのインタビューで構成されています。このサイトはなんといっても動画の力でしょう。ねらいを持った見せ方など例外ももちろんありますが、やはりテキストで説明するより画像、そして『時間を使って見てもらう』という壁を超えられるならば動画はなによりも直感的に伝えられます。 個人的に上記サイトで使われている動画クリエイターのファンです。以下の動画をぜひ見てみてください。日本という国が持つ両極端な部分、混沌とワビサビが非常にうまく切り取られています。

『In Japan - 2015』 - vincent Urban

https://vimeo.com/160301271  

3.『ホテル カンラ京都』

http://hotelkanra.jp/ 構成はとにかくミニマムです。そのミニマムな構成は、写真の魅力を最大限引き立てています。誘導部のテキストはほぼ3行以内にまとめられていて、読み進めていく上で邪魔になりません。グローバルメニューもハンバーガーメニューとして格納。画面上の要素を極限まで切り詰めています。 以上です。いかがでしたでしょうか。 あぁ、旅に出たい…

仕事の息抜きにオススメ! おもしろWEBサイト・WEBサービス7選

4月に入って、ずいぶんと暖かくなってきました。 はやくお花見がしたい!そんな気分の菅原です。 忙しく働いているみなさんはどのように、仕事最中にリフレッシュや休憩を取っているのでしょうか? パソコンに向かって仕事をしていると、いつの間にか時間が過ぎていて、気づいたときにはこんな時間…。と思うことも多々あります。 厚生労働省がこんなガイドラインも策定してます。 VDT作業における労働衛生環境管理のためのガイドライン 「VDT作業」とは簡単に言うとコンピューターのディスプレイを使用した作業のことで、1時間に1回~2回、10〜15分の休憩を取りながら働きましょ〜ってことみたいです。 ってことですが、息抜きの際にも、やっぱりパソコンからは離れられないという方もいらっしゃると思います。 そこで今回はリフレッシュする際に、おすすめのWEBサイトやWEBサービスを紹介していきま〜す。

目次

akinator®

http://jp.akinator.com/ akinator®は自分の頭のなかに想像している有名人をアキネイターからの質問に答える事によって当ててくれるんです。 結構アンダーグラウンドな人を想像しましたが、外れたことが今まで一度もないんです。(゚A゚;)ゴクリ 名前が思い浮かばない芸能人を調べる事もできますね。しかし、なんとも不思議です…。

hacker typer

http://hackertyper.net/ まるでハッカーになった気分が味わえる、hacker typer 適当にキーボードを叩いているだけで、あら不思議ソースコードが出来上がってきます。 一流のプログラマーになった気分です。

<物語>ヒロインに永遠に罵倒されるサイト

http://kodansha-box.jp/topics/nishio/orokamono/ ただひたすらにアニメのヒロインに罵声を浴びせられるというサイトです。 どんな人が楽しめるのでしょうか?ちょっと考えてみました。 ・仕事などで失敗してしまったときに叱られた反動で立ち直れる方 ・罵声を浴びせられることに喜びを感じる方(ドMですね) ・単純にアニメのファンの方 個人的にマニアアックと感じました。

すごいWEB

http://sugoiweb.nezihiko.com/ すごいです!もうこれは本当にスーパーでミラクル! こんなWEBサイトが存在したなんて史上空前、いや空前絶後のっ〜〜!大発見です。 しかも芸も細かいので流石の一言につきます。ココまで行くと完全に突き抜けてます。

ボケて(bokete)

http://bokete.jp/ ザ・笑いです。あと、上手い!です。 例えるなら国民的お笑い番組 笑点を見ているような、そんなホっと一息つけるそんな瞬間ではないでしょうか。

The Sports Experts Scrolling Marathon

The Sports Experts Scrolling Marathon">http://scrollingmarathon.ca/">The Sports Experts Scrolling Marathon マラソンです。一つ違うのはマウスをコロコロと転がしていくマラソンです。 ボーっとしながら出来るゆる〜いマラソンですが、やり過ぎると腕が故障します!一息つくときの限定で行ったほうが良いかと思います。 もちろんマラソンなのでゴールがあります。ゴールした人だけが見れる感動のエンディングがあるかもしれません。

コピースロット-誰でもコピーライターに!

http://www.copywriter.co.jp/copyslot/ 誰でも簡単にコピーライターになれるをコンセプトにしたWEBサービス 単純明快です。スロットがまわっているのでポチッとクリックするだけでおもしろいコピーが完成します! おもわず吹き出してしまうコピーが作れたときはガッツポーズ。( ・´ー・`)どや

まとめ

今回は仕事の合間などにちょっと一息つけるような楽しめるサイトを紹介しました。 人を楽しませようというエンターテイメント性に優れたサイトばかりでした。 世の中にはまだまだ、おもしろいWEBサイトやWEBサービスがたくさんあると思いますので、また次回、紹介させていただきたいと思います。