2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2017年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、コンテンツファースト、レイアウトの多様化、フラットデザインやミニマリズムの進化、アニメーションの重要性、コミュニケーション・コラボレーション、AR/VR。 2017年のトレンドカラーは、フレッシュなグリーン。 参考: 2017年のトレンドカラー「グリーナリィ」と春のトレンドカラー10色 2017年、Webデザインのトレンド 2016年に人気が高かったインターフェイスのデザイントレンド 2017年、Adobe社のデザイン予測 2017年、Web制作業界全体の流れ 2017年、注目されているデザイナー・デベロッパーのツール 2017年、WebデザインのUIにおけるトレンド 2017年、Webデザインのトレンド まずはWebデザインのトレンド
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
最近のWebフロントエンド開発環境を Visual Studio 2015 (VS Code ではない)で構築する - npm パッケージインストール編 - - tkiryu’s blog
-- この記事は2016/10/18(Tue)現在の情報に基づいています -- この記事をざっくり言うと Visual Studio 2015 に Package Installer という拡張機能をインストールする Package Installer の機能で npm パッケージを簡単にインストールする Webフロントエンドの開発も Visual Studio 2015 (VS Codeではない)でやるのもいいかも という話です。 まえがき 最近のWebフロントエンド開発環境を構築するには、何を差し置いても npm がないと始まりません。コマンドプロンプト(Windows)やターミナル(Mac)で npm コマンドを打ち込んでパッケージをインストールしたりビルドしたり、一方で、Sublime Text, Atom, 最近だと Visual Studio Code などの高機能エディタを使
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
[WEB開発] 私的な最近のおすすめサービス/ツール 14選 〜2014年版〜 - Qiita
社内のライトニングトーク用に Qiita:Team に書こうとしていたものですが、誰かの参考になればと思い、こちらにアップします。対象は 「エンタープライズ系ではない」「スクリプト言語系の」WEB系エンジニア/プログラマ です。 流行り廃り、好みがあると思いますが、これらは実際に、私が試してよかったものです。サービスであったりライブラリであったり粒度がバラバラではありますが、参考まで^^; 「最近の」というタイトルですが、私的に最近、活用しているという意味で、サービス自体は昔からあるものもあります。 ① Heroku Heroku を利用すると、Ruby(on Rails)、PHP、Node.js、Python 等のサーバ側アプリケーションをホスティングすることが出来ます。デプロイ方法は Git で push するだけ です。 商用でちゃんと使おうとすると、無料枠の構成では難しいですが、デ
![[WEB開発] 私的な最近のおすすめサービス/ツール 14選 〜2014年版〜 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a05c54efc4e23b8f321cec1bcae63bb87257553f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV0VCJUU5JTk2JThCJUU3JTk5JUJBJTVEJTIwJUU3JUE3JTgxJUU3JTlBJTg0JUUzJTgxJUFBJUU2JTlDJTgwJUU4JUJGJTkxJUUzJTgxJUFFJUUzJTgxJThBJUUzJTgxJTk5JUUzJTgxJTk5JUUzJTgyJTgxJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkzJUUzJTgyJUI5JTJGJUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJTIwMTQlRTklODElQjglMjAlRTMlODAlOUMyMDE0JUU1JUI5JUI0JUU3JTg5JTg4JUUzJTgwJTlDJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1hYzRkNzQ2NGU1M2VlZDNkZTQwYTYxNDNlZmQ1MjZkOA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoa3VzdSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDQ2MDhlM2MxY2U1Y2E4MzU0YTFiOWMzNmI0MGNkZWE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44KG44KB44G_%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dd239fddef9fb1a234fbc44b218471eb6)
Web制作で使いこなしたいIE開発者ツールの最新機能
最新版のWebブラウザー「Internet Explorer 11」（以下、IE）は、2013年10月に正式リリースされ、その後のアップデートでも機能が少しずつ強化されてきた。例えば、2014年4月のWindows 8.1 Update 1提供と同時に機能が強化され、2014年8月のアップデート（August Update）でもさらに更新されている*1。 *1 以前のIEでは、IE5／IE6／IE7のようなメジャー・バージョンアップのタイミングで新機能が搭載されていたが、現在のIEでは他のマイクロソフト製品と同じく、1年の間に何度もアップデートが行われるようになっている。 そのIEにも、Chromeのデベロッパー・ツールと同様に、Web制作者向けのツール「F12開発者ツール」が標準搭載されており、そのツールもIE10以前からIE11のアップデートで大幅に変更されている。そこで本稿では、強化
新人Web担当者必見！ホームページ立ち上げ時にチェックするべき基本15項目
ホームページ立ち上げの際におさえるべきポイント ホームページは立ち上げたあとも修正を行うことができます。ただ中には修正しづらいものもありますので、今回は立ち上げ時にしっかりとチェックするべき15項目をまとめました。新米Web担当者でもわかりやすいように、最低限でかつ実務に則した項目を広くピックアップしています。 SEO対策やデザインのチェック項目 1.タイトルタグは適切か 全ページをチェックを行い、初期設定のままだったり「名称未設定」だったりするようなタイトルタグになっていないか、確認しましょう。 2.ディスクリプションは設定済みか Google検索においてタイトルタグの下に紹介文が表示されます。ここは全角文字でだいたい100文字程度です。タイトルタグや想定する検索キーワードとマッチしているか、確認しましょう。 3.リンク切れはないか Googleがあなたのホームページをインデックスすると
自分がプログラマになったときに、Webアプリケーション開発の独習で学びにくかったところをまとめる - Line 1: Error: Invalid Blog('by Esehara' )
はじめに 独学でプログラミングを勉強しても実務に通用しにくい理由 - 25歳ニートが35万円で上京を企むブログを読んだときに、僕自身もまた不安定労働から、ある程度「これだったら自分できそうだ」という気持ちで取り組み、独習のつもりで幾つものプログラムを書いたりしていた。だから、ニートからプログラマを目指して、社員として今頑張ってます、というのはすごく仲間意識を持ってしまうし、同じように頑張ってほしいという気持ちはある。 確かに、上の記事の趣旨自体、つまり「独習で学ぶことは、実務上でカバーできない部分がある」という側面があることは認めつつ、しかし、自分自身は独習したことが案外実務上で役に立っている部分もあり、その部分は明確にしたほうが、今後同じように独習して、今度プログラマを目指す人々において役に立つのではないか、と思うので、この記事を書こうと思う。 この記事で扱う「Webアプリケーション開発
未経験から目指す！Webプログラマーになるための勉強方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。最近、犬を飼ったtetsuです。 今回は、自分自身がWebプログラマーになるときにおこなった勉強方法（主にPHP）について大公開します。 まずは環境作り Webプログラマーにとって、まずは環境（サーバ）がないとプログラムを勉強できません。有料のサービスでサーバを用意したり、自分でサーバを作ったりとさまざまな方法がありますが、今は無料で環境を提供してくれるサービスが充実しています。 例えば ＠PAGES： http://atpages.jp/ xdomain： http://www.xdomain.ne.jp/ など、探すと結構出てきます。 無料のため、一部機能に制限があることもありしますが、プログラムが書けるようになってから有料のサーバを用意するのでも遅くはありません。 とにかくコードを書いてみる サーバの用意が出できたらまずはコードを書いてみましょう。 適当なファイルを作りま
Yeomanではじめる爆速webアプリ開発
Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。
Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ
Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。
Webサイト作るときのオレオレテンプレート
@sanographix さんが雑にWebページ作るときのセットアップ – MEMOGRAPHIXって記事を書いていたのですが、私も似たようなことをやっておりましたので一応晒してみます。まぁ自分用に作成したものなんで汎用性とかは多分無いです。 OZPA/ozpa-html-tempura ファイルはOZPA/ozpa-html-tempuraにあります。はじめてGithub使いました。きちんと覚えたい。 使い方（いつものやりかた）としてはごそっとマスターを適当なところにコピーして、ターミナル立ち上げてgruntするだけ。 ローカルサーバが立ち上がりますのでlocalhost:9001をブラウザで見て、LiveReloadしながら作業、と言う感じです。 細かいことを書き出すと長くなるのですが、ちょっと取り急ぎ公開してみますので使いたい人は自己責任で使ってください。 gitは初心者、ターミナル
マイクロソフトがテストツール「BrowserSwarm」発表
テスト結果はInternet Explorer（IE）、Google Chrome、Firefox、Safari、OperaなどのWebブラウザのバージョンごとに合格率が表示される。テストに合格した項目と不合格だった項目は別々に参照でき、修正が必要な個所がすぐに分かるようになっている。 BrowserSwarmのプロジェクトは、jQueryライブラリの開発などに参加しているappendTo、クラウドベースのテスト用プラットフォームを提供するSauce Labs、マイクロソフトのInternet Explorer（IE）チームが協力して手掛けている。 IEチームは「質の高いフレームワークは現代のWebの基盤であるにもかかわらず、さまざまな端末やWebブラウザで横断的なテストができるリソースはあまり存在していなかった。BrowserSwarmでは相互運用性を備えたフレームワークの構築を支援する
僕がWEB制作者として必要不可欠だったWEBサービスやツールの厳選まとめ【2013年振り返り版】 | バンクーバーのうぇぶ屋
皆様、新年あけましておめでとうございますっ！ さて、今年も年が明けましたね〜。なんか去年は本当に色々な事があったように思う一方。12ヶ月の内2ヶ月を休暇で過ごしてしまった事もあり、正直サボりの一年だったようにも感じてしまうのが正直な所ですが…。かたや一昨年は学校に合計4ヶ月くらい通って学校ばっかの一年だったし… 『来年本気出すっ！』って言って、全然実現してないダメ人間の典型ですね！ しかし今年こそはちょっと（久々に）本腰入れて自分を追い込もうと思っているプロジェクトがFrog含め幾つかあるため、また一層勉強に仕事に遊びに旅行と、全部思いっきり励んで行きたいなと思っていますのでよろしくお願いします〜。 と、言うわけで早速ですが、今日は僕が去年お世話になりまくったので、2014年も多分お世話になるであろうサイトを、全て片っ端からまとめてみようと思います。 毎回こういうまとめは適当ですが年末年始
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
[web制作]webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した
最初に定義をしておくと、可読性とは、素早く読めるか、理解しやすいか、読んでて疲れないかという事です。これらにおいて可能な限り優れたものを作ることが、コンテンツと、それを届けようとする各セクションに関わる人が考えるべきことだという事になります。 可読性とコンテンツ まず、何はなくともコンテンツです。文章が読み易いものであることを可読性が高いという言い方をするのは聞いたことがあるかと思います。そのうち、コンテンツ自体が読み易い内容であるかどうかをリーダビリティー(readability)と言います。 リーダビリティーに関わってくるのは 文章量 図版率 内容 表現、言葉遣い といったものです。コンテンツを作る人は、自分の書いている文章の長さ、文字と図の割合、内容、表現の複雑さ等を届ける相手に適したバランスにしなければいけません。 可読性の低いコンテンツ
![[web制作]webコンテンツの可読性を左右しそうな要素を思いつくだけ書き出した](https://cdn-ak-scissors.b.st-hatena.com/image/square/78812e072c3d7a68d5f12a10df31d88ce5989c9f/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Fweb-readability-legibility-02-150x150.png)
WEB制作時に役立つ！ダミーテキストに使える定型文まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、弊社プログラマーの段田さんのブログで、ボーナスアップの道具として利用された野田です。 あれは、久しぶりに傷ついた。 そして、プライベートでもいろんな人にいじられた。 ネットって怖いですね。 さて、今回は、WEB制作に役立つ定型文のご紹介を致します。 僕自身、デザインする際に構成からガッツリ考えるのが大好きっていうか仕事なので、 それにあわせてダミーテキストを考えることが多いです。 デザインを提出する際には、「テキストテキストテキスト」や「ダミーダミーダミー」で提出することは絶対にしません。 お客様の意図を読み取ってこちらからご提案させていただくということも、Webデザイナーには必要なスキルの一つだと思うからです。 あたりまえなことですが、こういう部分に気づかない方も案外いらっしゃいます。 正直、僕もデザインを始めてすぐの頃にはそんな感じでした。 「仮」という言葉に甘えてしまう事は良く
Webサイト高速化対策の現状
はじめに はじめまして、こんにちは。クラスメソッド株式会社でWebを担当している野中です。 この度、「これから身につけるWebサイト高速化テクニック」と題して記事を連載させていただくこととなりました。 本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて高速化に関する手法や技術について調べ、身につけたテクニックを細かな解説を加えて紹介していきます。中には少し難しいテクニックも含まれますが、できる限り分かりやすく、すぐに実践できるよう紹介していきたいと思います。とても長い連載ですが、よろしくお願いいたします。 なお、本連載はクラスメソッド開発ブログで連載されている「身につけておきたいWebサイト高速化テクニック」の増補改訂版です。 本連載の流れ 本連載はできるだけ多くの方に興味を持っていただけるように、最初に高速化対策の全体像と必要な知識を紹介します。その後、具体的な高速化対策と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド
ウェブサイト作成の勉強になった日本語スライドのまとめ
