Webサイトのファーストビューに『動き』を取り入れるアイデア8選｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webサイトの顔とも言える「ファーストビュー」をより魅力的に見せるためのコツについて調べてみました。参考サイトもたくさん紹介しているので、ぜひ最後までお楽しみください✍ はじめに：ファーストビュー（FV）とは？Webサイトのファーストビュー（FV）とは、サイトを開いたときにスクロールせず見える範囲のこと。ユーザーにとってはいちばん最初に目に飛び込んでくる、Webサイトの第一印象を決める「顔」となる部分です。 （ちなみに「ファーストビュー」は和製英語で、英語では「Above the fold」と呼ぶそうです。） たとえば、家計簿プリカ「B/43」公式サイトのファーストビューは以下のようなデザイン。B/43のメリットを文章とカードによって端的に伝えながら、画面下部には利用シーンがわかる写真をカルーセルで掲載。一画面の中
Python だけで作る Webアプリケーション(フロントエンド編)ーはじめに - Qiita
お疲れ様です。 今日からは「Python だけで作る Web アプリケーション(フロントエンド編)」について部分いたします。 はじめに 設計方針 共通部分の作成 ログインページ 商品一覧ページ 商品詳細ページ カートページ 注文一覧ページ 注文詳細ページ まとめ 今回は10の記事に分けて投稿するようにします。 今日は「はじめに」について部分いたします。 なぜ本書を書いたのか 本書は主に以下のような方を対象にしています。 Web アプリケーションの構築経験がない新米エンジニア Python はかけるが、HTML/JS/CSS が苦手な Pythonista 細かい UI の設定はせず、検証・デモ用の Web アプリを短期間で作りたい開発チーム どうやって作ったか 対象読者の悩みを解決するために、次の 3 つの要素が必要と考えました。 Web アプリケーションの基礎知識 参考にしてもらえる品質
Sourcegraph
Sourcegraph is a web-based code search and navigation tool for dev teams. Search, navigate, and review code. Find answers.
初心者目線でAjaxの説明 - Qiita
Ajaxとは Ajaxとは「Asynchronous JavaScript + XML」の略 Asynchronousとは、非同時性の、非同期の つまり、「JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。」 んん？ 詳しく内容を追っていきましょう。 そもそも非同期通信とはどんなものか？ このように画像の遷移のない通信を非同期通信と言います。 同期処理は一瞬画面が白くなって、画面を切り替わることを言います。 こういったことをするためにAjaxという仕組みが必要です。 どうしてこんなことができるのか？ 大枠をざっくり先に説明します。 同期通信の場合 webブラウザからサーバーにリクエストを通信し、レスポンスが戻ってくる。 この時に、すべての情報を通信しているので、一瞬画面が白くなる。 =>サーバーからレスポンスが返ってくるまでは他の作業はできない。 非同期通信の場合
岡山大学が写真をQRコード化するWEBアプリを開発
岡山大学の学術研究院自然科学学域（工)栗林稔准教授と大学院自然科学研究科博士前期課程の学生は3月19日、誰でも簡単に写真をQRコード化させるWEBアプリケーションを開発したと発表しました。 このWEBアプリを使うと、上のアイキャッチ画像のようなデザインQRコードが簡単に作成できます。 Design QRcode Generator このWEBアプリ「Design QRcode Generator」は、ブラウザ上で画像をアップロードし、QRコード化させたい場所とサイズをマウス操作で行い、格納させたい情報データを入力するだけで簡単にデザインQRコードを作成できます。 従来は、プログラムのコードを専用PC端末上で動作させる必要があり、指定する場所やサイズの指定もやや複雑でした。今回のWEBアプリでは専用のソフトウェアは不要で簡単に操作できます。現在はベータ版として一時的な公開ですが、今後の本格的
Web制作のお供に！最新オンライン時短ツール32個まとめ
Web制作のお供に！最新オンライン時短ツール32個まとめ これから使いたい、あまり知られていない便利ツールが大集合 Web制作の効率化を図りたいというひとにオススメしたい、最新オンライン時短ツールをまとめてご紹介します。 「もっと早く知りたかった」と思ってしまう、便利なツールを中心に、クリエイターの日々のデザイン業務を軽減してくれる、目からウロコな素材やツールが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. デザインツール 2. Webデザイン便利ツール 3. モックアップ・UIツール 4. アイコンツール 5. クリエイティブ・面白ツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ デザインツール Womp 3D 立体感たっぷりな3Dデザインを、ブラウザ上で直感的に作成できる、新世代のオンラインツー
DeepL翻訳で海外のWebサイト制作情報を読みあさろう！
2023年2月7日 便利ツール, 海外情報, 英語 DeepL（ディープエル）翻訳は、ドイツの企業が開発している機械翻訳エンジン。自然で高い品質の翻訳文が話題となっています。今回はそのDeepL翻訳を、Webデザインや制作、技術系の分野で活用していく方法を紹介します！ ↑私が10年以上利用している会計ソフト！ DeepL翻訳の使い方 DeepL翻訳の翻訳精度の高さは一度使ってみると実感できるかと思います。基本的にはDeepLのWebサイトにアクセスして、翻訳したい文章をコピペするだけ。ただ、毎回DeepL翻訳のWebサイトに文章をコピペするのって地味に面倒ですよね…。 そこでおすすめなのがDeepL翻訳のChrome拡張です。インストールしてWebサイト内の文章を選択すると、カーソル付近にDeepLマークが表示され、クリックすれば翻訳されます。 技術系ドキュメント特有の用語やコードを含んで
A Complete Guide to Flexbox | CSS-Tricks
display This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. .container { display: flex; /* or inline-flex */ } Note that CSS columns have no effect on a flex container. flex-direction This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional
ワクワクが満載！Web制作を変える最新オンラインツール50個まとめ
この記事では、Webデザイン制作がグッと楽になる最新オンラインツール50個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール 2. Web制作便利ツール 3. デザインツール 4. アイコンツール 6. クリエイティブ・面白ツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ
【無料・初心者向け】Webサイトの作り方と準備|Webデザインの教科書
WEBページの作るのって大変そう... っと思われてる方！！ そんなことないです。 パソコンさえあれば、すぐ始められます。 ハイスペックのパソコンなんていりません!!普通のパソコンで十分です。 今回はWebページの作成に必要なものとWebとはどんなものなのか解説しています。
まだ使ってる？今は非推奨となったJavaScriptの書き方
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textContent や、HTMLも含めた文字列を挿入でき
Webに最適なメディアフォーマットを整理する - 2021
macOS 12 Montereyがリリースされました。また2021年09月にはiOS 15もリリースされています。 2020年にリリースされたiOS 14 / macOS 11ではWebPのサポートを開始し、macOS 12ではOpusのサポートを開始しました。 また最近ではGoogle Chrome、FirefoxがAVIFのサポートを開始するなど、新たなメディアフォーマットも登場しています。 そこで2021年現在、Webにおける最適なメディアフォーマットを整理しようと思います。 TL; DR 画像: WebP もしくは SVG 音声: AAC - .mp4 動画: H.264 - AAC - .mp4 もしくは VP9 - AAC - .mp4 最適とは なるべく多くのデバイスとOSとブラウザでデフォルトで使える macOS: Chrome、Firefox、Safari、Edge (
Webサイトの制作途中や学習時に使えるダミー画像の生成サービス
2021年10月21日 Webサイト制作, 便利ツール Webサイトの制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。そんなダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。かつて「制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ」という記事で紹介したこともあったのですが、SSLに対応していないものも多かったので、httpsに対応した画像URLが生成できるもののみに絞りました！ ↑私が10年以上利用している会計ソフト！ Placeholder.com Placeholder.comは昔からあるダミー画像を提供しているサービス。とにかくシンプル！以前の名前はPlacehold.itでした。その頃からずっとお世話になっています！ 基本的な使い方は、画像のソース部分に https
FigmaでWebサイトのデザインから公開まで完結するプラグイン「Makers」が登場！ | Web Design Trends
先日、「Makers」というFigmaでWebサイトのデザイン制作から公開まで完結することができるプラグインが発表されました。 ノーコードでのWeb制作は非常に注目を集めている分野であり、実際にノーコードでのWeb制作も広まってきています。そんな中登場するMakersはどのようなツールなのでしょうか。 今回は、Makersというプラグインの概要と、機能や料金についてご紹介したいと思います。 進化が止まらない！Webサイトが簡単に作れるノーコードツールまとめ 近年話題を集めている「ノーコード」ですが、Webサイト制作においてもノーコードでサイトを制作できるツールやサービスが充実してきました。 数年前までは、まだまだノーコードツールの使い勝手もあまり良くなく... Web Design Trends Makersは、Figmaで制作したデザインをそのままWebサイトとして公開することができるプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lism UI
Perflink
JSON Crack | More Than A JSON Editor
#003 講師目線で見た伸びるWebデザイナー・エンジニア〜自分に適した勉強法を分かっている人は成長が早い！円安の今Webクリエイターが英語を学ぶべき理由とは？〜
https://css-tricks.com/wp-content/uploads/2022/02/css-flexbox-poster.png
Check WebTech|採用技術にフォーカスしたWebサイトリンク集。トレンドリサーチや技術選定の参考に、WEBデザインやコーディング、開発の参考にも使えるWebサイトギャラリー。
