Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。｜Takumi HASEGAWA (unshift Inc.)
まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト 嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ
阿部寛のホームページをさらに高速化した猛者現る 35％の高速化に成功し速度制限未満でも一瞬で表示可能に
シンプルな構成により爆速で表示されることで有名な阿部寛のホームページですが、さまざまな技術を駆使してさらに35％の高速化を実現した動画が人気です。ぜひ本家サイトでも取り入れてほしい改善策。 まだ高速化の余地が……!? この動画を公開したのは、コスメティック田中さん（YouTube／Twitter）。動画によると、阿部寛のホームページがホームページビルダーというやや古いソフトで作られているなど、近代的な技術を駆使すれば改善できる余地が見られることを発見し、高速化に乗り出したそうです。 今回実施する高速化 この2点を改善していきます 最初に実施した高速化は、サイトの通信速度の改善から。CDNという技術で通信速度を上げる技術を使用するため、AmazonのCloudFrontにファイルをそのままアップロードして、コピーの阿部寛のホームページを作成しました。 ファイルをアップロードします このCDN
Hyper Estraier：インデックス管理系コマンド
Hyper Estraierは、主に estcmd というコマンドを使用してインデックスを管理します。 estcmd は非常に多くのオプションがあり、機能も多機能なので、そのうちの代表的なものだけここでは紹介します。 インデックス作成 まず初めにインデックスを作成します。 % estcmd gather -il ja -sd index_path target_path index_path はインデックスとなるディレクトリ、target_path は検索対象となるディレクトリです。 -sd はファイルの作成日時と更新日時をインデックスに記録するというオプションで、次回から差分のみ更新する場合に必要となります。 ２回目からは以下のようにしてインデックスを更新します。 -cm はインデックス内に存在しないか、更新日時が新しい文書のみを登録するオプションです。 -cl は上書きされた文書が含ん
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
Web制作の効率、生産性アップ！話題の最新オンラインツール33個まとめ
この記事では、Webデザイン制作を効率アップさせる最新オンラインツール33個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これらのツールをうまく活用することで、面倒な作業も短時間で行い、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しましょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. アイコンツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ We
「SEOに強いHTMLの書き方」についての個人的な見解
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
今後のサイトの更新について
あいまい検索（英語検索） あいまいな日本語で（英語でも）検索できます。上手く動くか分からないのでお試しです。 「マスクを付けた〇〇」というイラストが無い場合はマスク単体と既存のイラストを組み合わせてください。 検索の仕方については「検索のコツ」をご覧ください。 いらすとやパーティの漫画を載せているツイッターアカウントです。 Eテレのショートアニメです。 写真とイラストを載せているインスタのアカウントです。 いらすとやが更新されたらお知らせするツイッターアカウントです。 いらすとやのLINEスタンプに関する情報をお知らせするLINEアカウントです。 こんにちは作者のみふねです。2月からサイトが不定期更新になるお知らせです。 早いものでいらすとやは2月で10年目に入ります。一人でコツコツ描いていた素材もいつの間にか25000点以上になりました。おかげさまで遠い世界の方達にイラストを使ってもらっ
ウェブの進化とウェブブラウザ開発の最前線
学部 3, 4 年生向けの特別講義で『ウェブの進化とウェブブラウザ開発の最前線』というタイトルで話をしてきました。 ウェブの進化の歴史を知ることで現在のトレンドについて理解し、またウェブブラウザというグローバルで大規模なソフトウェアの開発の一端を垣間見ることで、ウェブやウェブブラウザの開発に少しでも興味を持ってくれたら良いなぁという気持ちで話をしてきました。 なお歴史観については私の事実誤認も含まれると思うので、間違いを見つけたら教えて下さい :-) 追記 (随時) たくさんの反応を頂きありがとうございます！次回同じような資料を作るときの参考にできるよう、ここにメモしていきます。ウェブは無限に話せる話題があって楽しいですね！ ウェブ以前のハイパーテキストの歴史も取り入れるべきでは？ ありがとうございます！おっしゃるとおりで、ウェブの進化史と言いつつウェブが公開されてからの話しかしていないの
Web 技術の調査方法 | blog.jxck.io
Intro 「新しい API などを、どうやって調べているのか」「仕様などを調べる際に、どこから手をつければ良いのか」などといった質問をもらうことがある。 確かにどこかに明文化されていると言うよりは、普段からやっていて、ある程度慣れてきているだけなものであり、自分としても明文化していなかったため、これを機に解説してみる。 やり方は一つではない上に日々変わっていくだろうが、頻繁にこの記事を更新するつもりはない。また、筆者は実務で必要になるというよりは、ほとんどを趣味でやっているため、このやり方が合わない場面は多々有るだろう。 スコープとしては、ライブラリ、ツール、フレームワークなどではなく、 Web プラットフォーム関連の標準やブラウザの実装状況などに限定している。 Scope 従来からあり、広く認知された API については、情報も多く調査の敷居はそこまで高くないため、今回は議論が始まって
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2022年11月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
どのウェブフレームワークが一番高速に動作するのかが一目で分かる「Web Framework Benchmarks」レビュー
普段何気なく目にしているウェブサイトも、裏ではさまざまなフレームワークを活用しています。「Web Framework Benchmarks」はそうしたフレームワークたちがアクセスをさばくときの処理速度を計測してベンチマークにまとめたもので、2013年に公開されて以降、年々アップデートが積み重ねられて多種多様なフレームワークの実力を一目で確認できるようになっています。 TechEmpower Framework Benchmarks https://www.techempower.com/benchmarks/ 上記のURLへアクセスすると、2020年5月28日にアップデートされた「Round 19」の内容が表示されます。 こんな感じでテスト結果がランキング形式で表示されます。さまざまなテスト結果が掲載されていますが、最初に表示される「Fortunes」はデータベースを読み取ってHTMLを生
2020年の11の必見のフロントエンドトレンド - Qiita
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
【NoCode】メルカリのようなサービスを、10万円で作る方法を考えてみる｜__shinji__
このnoteは、プログラマでない方でも、下記のようなメルカリ風のサービスを簡単に1時間でつくる方法を書いています。 はじめに「メルカリみたいなサービス、どのくらいで作れる？」 プログラマを生業としている方なら一度はこう尋ねられたことがあるのではないでしょうか。メルカリでなくてもUberやAirbnbだったりするかもしれません。いずれにせよ、話題のサービスを引き合いにだして、少しコンセプトを変えたサービスを作りたいといった相談をされたことのある方は多いのではないかと思います。 この問いに対して 「いやいや、メルカリ作るなんてどのくらい費用がかかると思ってるんですかー」 と、かわすのもいいでしょう。まともに作るとしたら初期バージョンでも数百万〜の規模になる可能性があり、開発リソースを用意するのも大変ですし、一生懸命ヒアリングして見積もったとしても、そもそも相手にそれなりのやる気がないと企画倒れ
プレーンテキスト Markdown 時代の終焉
なぜ Day One は Markdown を捨てたのか Day One が Markdown をやめて WYSIWYG に移行した話は前書いた。 Day One がクソになった Day One 、このブログでも度々言及していて、 Markdown で日記が書けて便利だったんだけど、最近のバージョンアップ（ Mac は 2.8 以降 、 iOS は 3.0 以降）でプレー... portalshit.net 自分が知っている範囲でアンチ Markdown 勢は Scrapbox くらいしか思い浮かばず、 GitHub や Trello などのグローバル勢に加え、 Qiita やはてなブログなど日本国内向けのサービスでも当然のように Markdown が共通言語として使われているのに、その Markdown を捨てて WYSIWYG 化する1という戦略は疑問だった。 ひとむかし前の WYSI
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
【追記あり】カネカ社は本当に育休ページを削除したのか。 - 笑顔を創りたいWeb屋の日常
いや、「削除したのか」の問いに対しては「削除した」ですね。間違いなく。 ただそれは「炎上騒動を受けて削除したのか」については、僕には「No」に見える。 そのことについて「ファクトを大事にする」という観点で書きたいんだけど、その前にちゃんと前提を伝えておきたい。 僕は、（今回の件が事実だと間違いないなら）お子さんが産まれたばかりの父親となった従業員を転勤させるということについては、どんな理由があっても受け入れられません。 同時に、企業側にも何らか事情があったり誤解があった可能性だって否めないので「どちらが悪だ」とも言いたくありません。ただただ「どんな事情があったか知らないけど、産まれたばかりのお子さんがいる人を転勤なんてさせないで欲しい」「（何の配慮も無くその辞令を出したしたなら）そんな会社は好きじゃない」だけです。 この前提なんよ。この前提だけは忘れないでね！ その上で、「該当ページをこの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flashほど一時代を築いた割りに本気で使えなくなった技術ないだろ
Adobe、無料の「Creative Cloud Express」投入。デザインの心得がなくても高品質コンテンツを簡単に作成可能に
Ubuntu 18.04に.NET Core 2をインストールしてC#プログラムをビルドする
