Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3
HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無料アプリで、今までオンラインであちこちの各ツールを利用していた人とかにかなり便利なツールだと思います。 He3: Modern Developer Toolbox He3の特徴 He3のダウンロードとインストール He3の使い方 He3の特徴 He3は、200種類以上のWeb制作に役立つ便利ツールが詰め込まれたデベロッパー向けのツールボックスです。 200種類以上あるツールは、カテゴリ別にまとめられており、スマート検索機能ですぐに
のんびり学ぶ Figma 〜コンポーネント編〜 (1) | さくらのナレッジ
このシリーズについて みなさんこんにちは。さくらインターネットでフロントエンド領域を担当している山田です。この連載では、フロントエンド開発を行っているメンバーが、開発に役立つ情報を半分趣味で不定期掲載していく予定です。 自分からは、近年人気のデザインツールである『Figma』の便利な情報をお伝えしたいと思います。デザイナーの方はもちろん、エンジニアの方にも興味を持っていただける機能がたくさん詰まったFigmaを紹介していきます。 Figmaのご紹介 チーム開発に適したデザインツール Figmaのメインの機能の一つはもちろんデザイン制作です。Figmaを使うことで、これまでのデザインツールでは難しかったWebアプリケーションやモバイルアプリケーションといった、よりダイナミックに画面が変化していくタイプのデザインを表現しやすくなりました。 中でも、複数人で同じデザインファイルを閲覧・編集可能な
muuuuu.org運営者が教える名著「アイデアのつくり方」に倣った、Web制作における参考サイトの探し方
QUOITWORKSでディレクションとデザインをやっております、村松です。 とっても久しぶりな今回は、Webの受託制作で確実と言って良いほど行われる参考サイトの探し方について体系化された記事がなかったので、1940年から世界中の人々を魅了し続ける不変の法則。不朽の名著。ジェームス W.ヤングの「アイデアのつくり方」のつくり方を参考に、僕が10年以上のキャリアから手探りで模索したやり方をまとめました。 目次 1.まず最初にアイデアのつくり方はどのようにやるのか。2.なぜ参考サイトを集めるのか。3.何から着手、どんな観点で参考を探すのか4.実際に使ってるサイト。5.初心者がやりがちな誤った探し方、余談 1.アイデアのつくり方はどのようにやるのか。 まずアイデアの原理から説明します。 アイデアというのは「既存の2つ以上の要素を新しい一つの形に結びつけること関連性を見つけ出すのが上手い人が得意とさ
そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends
WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP（ウェッピー）とは？ WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34％程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過（アルファチャンネル）や、アニメーションにも対応しています。つまり、JPEGのよ
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法
以前、Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！という記事を書いたことがありました。 この記事、Arrownの歴代記事の中でもかなりのバズを生み出してくれたのですが、今回のブログ記事は、1年越しの続編の記事になります！（遅い！笑） Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！ でご紹介させていただいたように、2018年4月、それまで提供されていたInstagram APIの一部機能が終了したことにより、Webサイトに埋め込んでいたInstagramの写真が突然表示されなくなってしまったということがありました。 昨年2018年の段階では、Instagramを運営するFaceBook社側からは、「Instagram APIの代替方法につい
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
accrefs
ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
Webフロントエンドとサーバーサイドの技術動向をざっくり整理する／JavaScript - SE_BOKUのまとめノート的ブログ
目次 はじめに HTMLレンダリング HTMLレンダリング ：ブラウザでHTMLを受け取り画面表示 HTMLレンダリング ：JavaScriptでレンダリングして画面表示 HTMLレンダリング ：WEBページの初期表示の各段階 サーバーサイド側の処理 サーバーサイド側：Node.jsという実行環境＆開発環境 クライアントサイトレンダリング クライアントサイトレンダリング：リアルDOMと仮想DOM サーバーサイドレンダリング おまけ：参考にしたリンクなど はじめに Web開発で「フロントエンドはモダンな感じでやりましょう。jQueryではなしに。」ということになったのですが、その時の僕は「モダンな感じ」なるものが示す「最新の技術動向」に疎くて話についていけませんでした、。 反省し、WEBフロントエンドとサーバーサイドあたりの技術動向のアウトラインをざっくりと整理してみることにしました。 よく
新人Webプログラマの学習が捗るリンク集 - Qiita
はじめに この記事は自分のための備忘録も兼ねた、新人による新人のための新人の教材リンク集です。 新年度になりましたので、少し更新をしました。よろしくおねがいします。 ターゲット この記事はこんな人に向けて書いています。 これからWebプログラマを目指す人 Webプログラマになったばかりの人 コーディングだけでなくデザインやマーケティングにも興味がある人 早く一人前のWebプログラマになりたいと思ってる人 つまりわたしのようなへっぽこのこと 1. コーディングを身につける ▼まずはここから 何から始めて良いかわからない！新しい言語を学びたい！という方に。 ドットインストール https://dotinstall.com/ 動画付きで解説してくれる学習サイト。とにかくカバーしている範囲が広いのも特徴。無料プランでも十分勉強になります。早口ながら丁寧でわかりやすく、時々ちょっと間違える田口先生の
Kawaii DB
女性をターゲットにしたWEBサイトで、参考になる優れたデザインばかりを集めています。オシャレで可愛い！ガーリーな女性向けホームページデザインWebデザインギャラリーサイトです。 素敵なデザインのホームページの推薦情報をお待ちしております。掲載お申し込みもお問い合わせフォームより受付いたしております。
2019年に流行するWebデザインの最新トレンド18個まとめ | Web Design Trends
そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか？ 最新のWebデザインのトレンドを取り入れることによって、Webサイトを魅力的に見せることができたり、使いやすいWebサイトを提供することができるなど、様々なメリットが生まれます。 今回は、2019年に流行するWebデザインの最新トレンドを一気にご紹介していきたいと思います。 2029年のWebデザイントレンドに関する記事を公開しました！最新情報を知りたい方はこちらをご覧ください。 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注
総合職・デザイナー向け技術基礎研修 2018 - クックパッド開発者ブログ
こんにちは、技術部の長（@s_osa_）です。 先日、新卒の総合職・デザイナー向けに技術基礎研修を行ないました。 そこで研修をするにあたってどのようなことを考えて何をしたか、担当者の視点から書いてみようと思います。 なぜやるのか 研修を担当することになったとき、はじめに「なぜやるのか」「この研修の目的は何なのか」を考え直してみました。 ぼんやりとした「技術についても少しは知っておいてほしい」という気持ちはありましたが、研修内容を考えるにあたって目的を明確にする必要がありました。 研修を受けてもらうのは総合職・デザイナーの人たちです。 エンジニアに対して技術研修があるのは自然ですが、技術職ではない人たちに技術研修を受けてもらうのには然るべき理由があるはずです。 理由の言語化を試みたところ、「研修を受ける人たちは技術職ではないが、テクノロジーカンパニーの一員であることに変わりはない」というとこ
今なぜHTTPS化なのか？インターネットの信頼性のために、技術者が知っておきたいTLSの歴史と技術背景
【変更履歴 2018年2月15日】当初の記事タイトルは「いまなぜHTTPS化なのか？ 技術者が知っておきたいSEOよりずっと大切なこと ― TLSの歴史と技術背景」でしたが、現行のものに変更しました。現在GoogleではWebサイトのHTTPS対応と検索結果の関係を強調しておらず、本記事の趣旨の一つにも本来は独立した問題であるSEOとHTTPS化を関連付けるという根強い誤解を解くことがありますが、当初のタイトルではかえってSEOとHTTPSを関連付けて読まれるおそれがあり、また同様の指摘もいただいたことから変更いたしました。 HTTPとHTTPSは、共にTCP通信上で動作します。したがって、いずれもTCPハンドシェイクで通信を開始します。 HTTP通信の場合には、このTCPハンドシェイク直後に、HTTPリクエストとレスポンスのやり取りが始まります。このHTTPのやり取りは平文通信であり、途
Webのディレクターはどこまでシステムや開発のことを理解しておくべきか -Webディレクションの新・標準ルール
ディレクターの中でも、システム寄りはよく分からないという人は少なくないと思います。はい、私がそうでした。システム周りのことはすべてSEの人に頼っていました。 Webサイトやアプリの要件や予算から、リソースの確保・スケジュール・設計・開発・テスト・リリースまで、ディレクターがシステム開発のワークフローをディレクションする上でしっかりと理解しておきたいことがまとめられた解説書を紹介します。 本書は、昨日11/21に発売されたばかり。 今年発売された「Webディレクションの新・標準ルール」の第2弾として、システム開発にスポットがあてられた全くの別物です。 ちなみに第1弾は、UXのディレクションが中心です。 紹介記事: Webディレクターが役割をしっかり果たさないとプロジェクトが進まない -Webディレクションの新・標準ルール
N予備校 プログラミングコース
初めてのプログラミングから 現場のプログラミング まで学ぶ 現役のドワンゴエンジニアが教える プログラミング学習サービス。 まずは無料で体験しよう。 ドワンゴ現役エンジニアから、 Webエンジニアの必須スキルである Webアプリ、スマホアプリ、大規模Web開発を学ぶ プログラミング未経験の高校生が、IT企業にWebエンジニアとして就職できるレベルになることを目指します。 そのために必要な幅広い知識を習得できるよう、プログラミングの基礎、セキュリティ、環境構築、 Webプログラミングやアプリ開発について、ドワンゴ現役エンジニアが細かいステップで1つ1つ丁寧に教えていきます。 IT企業内定実績 アルテリア・ネットワークス株式会社 株式会社マクロミル ＪＲ東日本メカトロニクス株式会社 株式会社アカツキ 株式会社ACCESS 株式会社フリークアウト・ホールディングス 株式会社アイスタイル 株式会社
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン研究所 | 読んでデザインを学ぶ参考ブログ
http://career-panda.com/design-website-2017
