この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
はじめに この記事は自分のための備忘録も兼ねた、新人による新人のための新人の教材リンク集です。 新年度になりましたので、少し更新をしました。よろしくおねがいします。 ターゲット この記事はこんな人に向けて書いています。 これからWebプログラマを目指す人 Webプログラマになったばかりの人 コーディングだけでなくデザインやマーケティングにも興味がある人 早く一人前のWebプログラマになりたいと思ってる人 つまりわたしのようなへっぽこのこと 1. コーディングを身につける ▼まずはここから 何から始めて良いかわからない！新しい言語を学びたい！という方に。 ドットインストール https://dotinstall.com/ 動画付きで解説してくれる学習サイト。とにかくカバーしている範囲が広いのも特徴。無料プランでも十分勉強になります。早口ながら丁寧でわかりやすく、時々ちょっと間違える田口先生の
TL;DR まあぜんぜん最強ではないですが、自分好みの配色 Web サービスをつくってみました yum-yum COLOR 個人で公開まで作りきったのは初めてでしたので、色々とつまずきました そんなつまずきポイントや、 Web サービスを公開するために利用した技術などを紹介していきます ❗ なぜ配色サービス ❓ 色彩検定という資格をご存知でしょうか？ 僕はプログラマーなのに 色が好き で、この試験を受検しました。 その学習をしてる時にこんな風に思ったのです。 この色相環、これを使って配色選べたら便利じゃない？ あっ、このトーン、これを使って配色選べたら便利じゃない？？ と。 受検勉強の追い込みをしないといけないのに、そっちのけで作り始めてしまった...というわけです （一時はどうなるかと思いましたが、無事に検定は合格しましたよ 🎉 ） どんなサービスなの ❓ 使い方 色相環 と Hue
クリエイティブは機械化できる？デザイナーは作ることがすべてではないですし、代わりに作ってくれるツールも年々増えてきます。感性が必要なデザインですから機械化が難しいように見えますが、そんなことはありません。デザインには科学的に説明できるところが少なくありませんし、機械化が進めばよりバラエティに富んだデザインを瞬時に作り上げることができるようになるはずです。 デザインの自動化・機械化という文脈で象徴的な出来事といえば、Adobe Sensei の発表です。Sensei は、人工知能（AI）と機械学習を活用して、写真補正、3Dモデリング、アニメーションなどデザイン作業の効率を劇的に変える技術です。 デザイナーにとってプラスになる技術であることは間違いないですが、デザインツールの中に留まることではないと思います。エンタープライズ向けソリューション Experience Cloud との連携で、CM
Facebook, Twitter等で軽く報告しておりましたが、イラスト図解式 この一冊で全部わかるWeb技術の基本の監修をしました。執筆したのは、所属するNRIネットコムの同僚2人です。どちらも、大学時代しっかり情報工学を学んで、入社してからはインフラ寄りの仕事をしている人間です。Webの仕組みを説明するにはピッタリな人間によって書かれています。 イラスト図解式 この一冊で全部わかるWeb技術の基本 作者: 小林恭平,坂本陽,佐々木拓郎出版社/メーカー: SBクリエイティブ発売日: 2017/03/16メディア: 単行本この商品を含むブログを見る 対象読者は？ 入門書なので、これからITエンジニアを目指す人や、なりたての人、或いはIT業界に入ったのでWebとはなんぞやと知りたい営業・企画の人など、非エンジニアでも読めるように意識して書かれています。そもそもWebと一口に言っても、現在では
TechCrunch Japan に以下のような記事が載っていました。 Googleは使わない、SEO対策しているから——Instagram有名人のGENKINGが語った10代の「リアル」 この記事には以下のように書いてあります。 「Googleで検索すると文字が出てくるし、（検索結果は）SEO対策されている。あとはスポンサー（広告）とかが上がってきて…ネットってリアルじゃない。Instagramは検索することで言葉より画像が表示される」 この中で「Googleで検索すると文字が出てくる」という部分、昔からネットに触れていた方であれば「検索結果をテキストで返すのは当たり前だろww」と言いたくなるかもしれませんが、私はこれからは文字を使わない検索や検索結果が増えそうだと考えています。 例えば iPhone の Siri は音声入力で「近くのラーメン屋は？」と尋ねると地図を返してきます。 In
Webデザインで重要なのが「写真」。インパクトがあってきれいな写真がどーんと使われていると、その先に書いてあることが読みたくなったり、サービスや商品を試してみたくなったりしますよね。たとえば、こちらのページ。 ちょっとお金を借りようかと調べていたらたまたま見つけたページですが、笑顔のさわやかな女性が「安心で選ぶなら銀行系カードローン」と訴えています。「こんなすてきな女性がすすめてくれるなら、ここで借りちゃおうかな。安心できそうだし」。 でもちょっと待って。あれ、でもこの子、前にも別のどこかで見たことがあるような……。いまどきは銀行でも画像の使い回しをしているのかと、気になった私は、Google画像検索でさっそく調べてみました。 同じ女性が脱毛やクルマ女子にも！ 「銀行系カードローン」の女性（長いので「人差し指さん」と呼びます）を検索してみると、やっぱりありました。格安脱毛店の紹介ページです
sponsored Z世代が本当にほしいPCを目指して企画したモデル 推し活はかどるノートPC「LAVIE SOL」いいかも。けっこう欲しいかも。 sponsored JAPANNEXTの開発中モデル＆最新注目モデルをまとめて紹介！【前編】 有機ELウルトラワイドに16:18の縦長ディスプレー！ワクワクが止まらないJAPANNEXTの開発中モデルを取材した sponsored Core Ultra 9 285KとZ890 Steel Legend WiFiの「ZEFT Z54CM」について聞いた さっそくCore Ultra 200SのBTOPC登場！ ASRock原口氏に聞いた採用マザボのコダワリに、一同唸る sponsored 桐井製作所にとってのBacklogは「発注のプロ」になるための成長ツール sponsored 独自のスタイルで落ちない＆便利なイヤホン、ファーウェイ「HUAWE
「プログラミングを学ぼうと瞬間最大風速的に意識は高くなるものの、一人でいると気がついたら一日ソシャゲして夕方頃に『また今日も勉強できなかった』と自己嫌悪。」モチベーションが続かない時の対策をはじめ、学び方、学べる環境の作り方をまとめています。
ベンチャーを立ち上げた当初というのは、やることが多すぎて時間がいくらあっても足りないものです。 今まで経験のないこともやらないといけなかったり、お金がないので人を雇うことや外注することも難しかったりします。 しかし、そういった負担や悩みも、オンラインで解決できるサービスがたくさんあります。 事業に集中するためにも、できるだけオンラインで管理や共有を行い、スムーズな会社経営をしていきましょう。 今回は、ベンチャーを設立したての起業家向けに、初めの段階から導入しておきたいWebサービスを厳選して紹介します。 メールやカレンダー メールやカレンダー、ドキュメント管理などは、メンバー間で円滑に業務を進めるためにも必須です。 一度導入すると、簡単には変更できないからこそ、じっくり選びたいところです。 とはいいつつも、GoogleAppsを利用すれば全てが解決します。 Google Apps Gmai
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #はじめに Webパフォーマンスはパフォーマンスエンジニアリングの1つの分野 Webパフォーマンス管理は、Webサイトの非機能要求の性能や可用性を扱います。 専門用語では、コンピュータの登場と時期を同じくして登場したパフォーマンスエンジニアリングという分野に属します。 パフォーマンスエンジニアリング パフォーマンスエンジニアリングとは、Wikipediaでは以下のように記載されています。 Performance engineering encompasses the techniques applied during a systems
Web担当者は絶対入れておくべき拡張「MozBar」Web担当者だったら入れておくべき拡張に「MozBar」があります。MozBarは、自社サイト・競合サイトの分析ツールサービスのMozが提供するChrome拡張です。ここでは、MozBarの拡張機能の内容と使い方を紹介します。 Web担当者だったら入れておくべき拡張に「MozBar」があります。MozBarは、自社サイト・競合サイトの分析ツールサービス「Moz」が提供するChrome拡張です。 この拡張を活用すると、Google検索時に対象サイトの「ドメイン価値」「ページ価値」「被リンク数」などが検索結果に表示されるので、一覧で対象サイトを確認することができ、非常に便利です。 ここでは、MozBarの拡張機能の内容と使い方を紹介します。 ※こちらの拡張機能は「Moz」のサービスに登録しないと使用することができません。30日間のフリートライ
![Web担当者は絶対入れておくべき拡張「MozBar」 [Chromeの使い方] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/29f81068cecdbed4966181fea515748d2aa3745e/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F5%2F1%2F1%2F7%2F3%2Ftopimg_original.jpg)
Web担当者の皆様は、スライドシェア（http://www.slideshare.net/）というWebサービスをご存知でしょうか。 登録されたスライド資料を無料にて無制限に閲覧することができるサービスです。各企業が作成した良質な資料を閲覧できるとあって近年人気を博し、スライドシェアの他にも様々な資料共有サービスが勃興しています。 今回は、無料で閲覧できるプレゼン資料の中から、Webマーケティングに役立つ良質なスライドを29個厳選し、目的別に整理しました。 一枚一枚画面を切り替えできるので、膨大な情報量でも全て見終えるのにそこまで疲れを感じないものとなっています。是非空いた時間にチェックしてみてください。 プレゼン技術の向上に 1.しょぼいプレゼンをパワポのせいにするな!
2014年7月16日に、Google と Adobe がリリースした Noto Sans（Adobe からは Source Han Sans という名称でリリース）というオープンソースのフォントファミリーは「日本のWebデザイン史上に残る画期的なフォント」だと思ったので記事にしました。 これまでの問題 ウエイトの不足 普段Webデザインなどの仕事をされている方でないとあまり気にすることはないかもしれませんが、たとえば Android は、アプリによっては下記のように日本語部分と英数字部分で大きくウエイト（フォントの太さ）が異なることがありました。 ※この画像は、Nexus 7（Android 4.4）で Twitter 公式アプリを表示した時のものです。 Nexus 7 では Chrome ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプ
従来のフォントは、閲覧しているユーザーの端末にインストールされていないと、別のフォントで表示されるというデメリットがありました。しかし、Webフォントはユーザーの環境に左右されることなく、同一のフォントを表示することができます。これはマルチスクリーン時代に、ウェブサイトの一貫性を持たせる上で大きなメリットとなります。 様々なWebフォントサービスがありますが、今回はAdobe Typekitをご紹介します。 Adobe Typekitとは？ Adobe Typekitは、Adobeが提供するCreative CloudのWebフォントサービスです。Webフォントを利用したいドメインを登録すると、コードが提示されて、それをサイトのHTMLに入れることでTypekitにある豊富なWebフォント(現在欧文フォントのみですが)を利用できます。 しかも、手順も非常に簡単です。早速利用してみましょう。
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
