昨今、行政のウェブサイトでも、JavaScriptを使用したインタラクティブな地図が使われることが多くなってきました。 2016年現在、民間のウェブページでは、動かせる地図を表示することは当たり前に行われるようになっています。 施設やイベントの場所を表現するにあたって、ウェブ地図はたいへん便利なツールであり、これからも利用が進みこそすれ、廃れることは無いはずです。 もちろん行政においても、サイトにウェブ地図を利用することはこれから一般的になってゆくと考えられます。 そうしたなか、行政サイトを構築する際に、いくつかの観点から気をつけたほうがよいだろう、ということをまとめてみます。 従うべき要件 行政のサイトを構築する際には、特にセキュリティ要件など、当然のように多くの要求仕様がありますが、ウェブ地図を利用するにあたって、見逃されがちな観点がいくつか存在します。 著作権・ライセンス的な観点 そ

HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。

最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり

Googleの最新IT技術などを学べるYouTubeチャンネルとして「Google Developeres」がありますが、基本的に英語コンテンツなので敬遠していた方も多いのではないでしょうか。 そんな背景から、日本語で作られた技術動画や講演動画などを集めたYouTubeチャンネル「Google Developers Japan」が開設されましたのでご紹介しようと思います！ 動画をピックアップしてご紹介！ まずは、どのような動画コンテンツが視聴できるのか、いくつかピックアップしてみたので、ぜひチェックしてみてください！

作成：2016/02/29 更新：2016/06/29 Webデザイン > 今年の頭にWeb制作に必要な知識が一通り学べるベスト記事9選をまとめましたが、今回はWebデザイン版をコムテブログの中から厳選してピックアップしました。総集編的な感じです。Webデザインに必要な基本知識をサラッと知りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 演出を学びたい レイアウトはユーザーが目的を達成させるために必要な設計。情報・環境に応じてレイアウトを組み立てていきます。上質さ・静寂さ・親しみやすさなど雰囲気や演出を学ぶならこの記事。 オシャレなレイアウトやユーザーが使いやすい配置を実現するために知っておきたい知識を、国産サイトを例にあげながら解説。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたい記事。 実務で役立つ逆引きレイア

2016年2月29日 Webデザイン, 便利ツール みなさん、UIデザインのツールって何を使っていますか？かつてはWebデザインに使うグラフィックツールはPhotoshop一択でした。しかし昨今はお手頃価格のグラフィックツールが増えてきて、どれを使うのがいいのか悩んでしまったり…。私もその一人でした。そこで現在巷でよく使われているPhotoshop、Illustrator、Sketchを比較してみました。 ↑私が10年以上利用している会計ソフト！ UIデザインのツールって、何使ってます？ — Webクリエイター ボックス (@webcreatorbox) February 19, 2016 Twitterでもアンケートを取ってみました！やはりPhotoshop強し！ 各ツールとも日々進化しており、以前はできなかった機能ができるようになっていたり…と、今回記事を書いていて改めて気づいたものも

契約書なしの口約束でお仕事を受けてませんか？ 自分はまだ駆け出しのフリーランスだから…… クライアントへ契約の手間を与えてしまうから遠慮しちゃう…… 契約とか法律とかよくわからないから…… などなど、理由は様々あるのかもしれません。 でも、契約書なしで案件を受けていると必ずいつかトラブルが起きますよ。 例えば、代金以上の労働を求められたり、お金を払わず逃げられたり。 ボクも12年間、ウェブ制作業に関わってきてますが、残念なことにこうした契約に関わるトラブルをいろいろと経験しました。 確かに、契約書を自分で作るのは難しいです。行政書士へ契約書の作成を依頼するとかなりお金がかかります。 でも、契約書がたった１枚あるだけで、クライアントと友好的な関係を長く築けるのも事実です。 この記事のタイトルには「モンスタークライアントから守る」と書きました。 実際は、契約書は制作を受ける側のあなただけを守る

2016年1月20日 Webデザイン テキストを四角で囲ったシンプルな枠。もちろんWebだけでなく、印刷物でも多く使われていますよね。今回は、デザインをする上では欠かせないと言っても過言ではないこの囲み枠にフォーカスしてみようと思います。新米デザイナーさんや、デザイナーじゃないけど資料作成をする機会の多い営業さんの参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ 呼び方は「囲み枠」で正しいのか…謎ですが、テキストを囲んでいるボックスのことです。海外では「パネル」「テキストボックス」等と呼ばれています。 こんな時に使うと◎ 強調する時 「今なら20％オフ！」「期間限定！」等、注目して欲しい要素に利用されます。Webサイト上ではアラートメッセージでよくみかけますね。図はBootstrapのアラート要素。 要素の差別化 補足や注意書きなど、メインのコンテンツと区別して表示したい時

たくさんあるWeb制作会社。1,000人以上のプロダクションから、フリーランスのクリエイターまで選択肢は様々です。 数多くある中から、目的にハマッたWeb制作会社をどのように見つければ良いのでしょうか？以下の方法をご紹介します。 1.Web制作会社年鑑を活用する 2.Webクリエイター向けの求人サイトを活用する 3.ポートフォリオサイトを活用する 4.クライアント側に直接聞いてみる 5.メディアやアワード、団体などを参考にする 1.Web制作会社年鑑を活用する http://www.weblab.co.jp より マイナビさんから出版されている『Web制作会社年鑑』では、大小様々なWeb制作会社が100社以上掲載されています。 実績一覧はもちろんのこと、従業員数や、受注額の目安、所在地などもわかりやすく記載されているので、「Web制作会社年鑑で探しています」という方は多いかと思います。 「

既にアメリカ西海岸を中心にデザインとテクロノジーの融合がこれまでに無い程に進んでいる現在、テクノロジーよりもデザインが重要性が高まってきていると感じる。これからのビジネスや生活の中心になると考えられるデザイン的側面から今年のトレンドを予測してみた。 1. “デザイン”の概念がどんどん広がっていく”デザイン”という言葉自体の概念も時代と共に変化している。グラフィックデザインや、Webデザインなど、これまでのいわゆる”絵を描く”ことから、デザイン的考え方を事業の為の一つの戦略スタイルとして活用するケースが増えている。英語で言う場合の小文字のdesignは表面を美しくする事、対して大文字のDESIGNは、世の中の様々な事柄をデザイン的観点から改善する為の価値を表現している。 もう既にデザインはデザイナーだけのものではなくなって来ている。デザインは日々の生活に密着しており、大きな企業から学生までデ

Googleが「HTTPS everywhere」を提唱していることなどが影響して、HTTPSで通信できるようにWebサイト全体を独自ドメインに対してSSL/TLSによる暗号化を行い、運用をスタートしている様子がちらほら私の周りには増えてきました。 Google ではさらにもう一歩踏み込んで、数か月前の Google I/O では、「HTTPS everywhere」をウェブで提唱しました。 ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に HTTP から HTTPS への切り替えをおすすめしたいと考えています。 （Google ウェブマスター向け公式ブログ: HTTPS をランキング シグナルに使用しますより） 私はしばらく動向を伺っていましたが「Webサイト全体をHTTPSへ切り替える流れは今後はより加速すると考えてもいい」と判断をし、このブログも全体をHTT

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

イントロダクションCSSには長らく適切なレイアウトメカニズムが不足していました。トランジション、アニメーション、フィルタ、これらはすべて素晴らしくて有用な言語への追加機能ですが、しかしWeb開発者が不満だった、永遠に続くようにも思われた主要な問題に対処するものではありませんでした。 Flexboxに感謝します。ついに我々は解決方法を手に入れました。 このサイトはCSSフレームワークではありません。その代わり、CSSだけでは解決するのが難しい、あるいは不可能だった問題が、今やFlexboxでとても簡単になった事例のショーケースとなることが、このサイトの趣旨です。また、Internet Explorer 11の最近のリリースとSafari 6.1により、今やすべてのモダンブラウザがFlexboxの最新仕様に対応しています。 以下のデモをご覧ください。Webインスペクタでスタイルを眺めるか、また

フロントエンドのテクニカルディレクションに求められるスキル フロントエンドの多様化が進む中で昨今重要視されているのが「テクニカルディレクション」のスキルセットです。 会社の規模や職域、ビジネスモデルにより求められるスキルセットは異なりますが、中小のWeb制作会社を前提に話をいたします。 ディレクター/フロントエンドエンジニアの作業分担 ケースとしては以下のようなパターンが考えられます。 アサインされたディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う アサインされたフロントエンドエンジニアがテクニカルディレクションとフロントエンド実装を行う アサインされたSE/テクニカルディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う。 個人的には2のケースでアサインされることが一番多いですが、最近の案件では3のケースで1年ほどテクニカルデ

私がバックエンドでいくつかの新機能を開発している間に、Fannyが我々のホームページの再デザインで非常にいい仕事をしてくれました。それ自体についてはまた別の記事で書くことにするのですが、それまでの合間に、我々のホームページの最初のバージョンに関するひとつの 逸話 をシェアしたいと思います。 Elokenzのホームページ(Ver.1) 私が最初にホームページをデザインしたとき、こういった仕事をどのように行うかという経験が本当に全くありませんでした。私は腕まくりをして、 Bootstrap を使って一からその制作を始めました。そのとき気に留めていたことは、 Oli Gardner が コンバージョンにフォーカスしたデザイン について述べた Unbounceの電子書籍 からのTipsだけでした。 そのため、ホームには気を散らしてしまうような要素を配置しないようにし、コントラストの高い2つのCal

【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」 佐川 夫美雄（Ashiras, inc.） Twitter Bootstrapバージョン4アルファ版が8月19日に公開されました。既にご存知の通りTwitter BootstrapはレスポンシブでモバイルファーストなCSSフレームワークです。さっとレスポンシブなサイトを構築するのに多くの方が利用しているのではないかと思います。この記事ではTwitter Bootstrapバージョン4の変更点について、筆者が「これは！」と思ったところをピックアップしてまとめます。 バージョン4の変更内容はGitHub上のissueで確認することができます。この中で筆者が注目している事項は LESSからSASSへの変更 アイコン（グラフィックアイコン）の削除 IE8のサポート終了とjQuery1系からjQuery2系

1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未

Googleがモバイル向けOSの「Android 5.0 Lollipop」で採用し、同社の他の製品やサービスでも導入されている「Material Design(マテリアルデザイン)」は、見た目だけではなく使い勝手までも意識してデザインされたUXです。そのマテリアルデザインを使ったウェブサイトを作れるCSS/Javascript/HTMLコンポーネント「Material Design Lite」を、Googleが公開しています。 Material Design Lite http://www.getmdl.io/ Introducing Material Design Lite — Google Developers — Medium https://medium.com/google-developers/introducing-material-design-lite-3ce67098

Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io