タグ: Webデザイン

スライドをデザインする時に気をつけていること

プレゼンをする時に必須なのがスライド。私も作成する機会がちょこちょこあります。基本的なデザインの原則はおさえつつ作っていくのですが、プレゼンテーションでの資料として参加者にみてもらうことを前提に考えた時に、特に気をつけているポイントを紹介します。

続きを読む

書籍執筆しました!『改訂版 1冊ですべて身につくHTML & CSSとWebデザイン入門講座』

多くの方に読んでいただいたWebサイト制作の入門書、『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』。発売から5年の月日が経ったので、改めて内容を精査し、加筆もした『改訂版 1冊ですべて身につくHTML & CSSとWebデザイン入門講座』が2024年3月2日発売!
続きを読む

スポーツイベントのWebサイトを作る時のポイントや実例

私の個人的SNSでちょこちょこ投稿しているのですが、今年からトライアスロンを始めまして、様々なスポーツイベントのWebサイトを閲覧する機会が増えました。そこで気づいたスポーツイベントや大会のWebサイトの特徴や、デザインのポイントをまとめてみます!
続きを読む

非デザイナーがFigmaでデザインの確認時に抑えておきたいポイント

人気ですよね、Figma。デザイナーではないけど、デザインのレビューをする立場の人も、この頃何かと話題のFigmaが気になっているのではないでしょうか。今回はデザイナーからFigmaのファイルが共有されたけど、何をすればわからない!という人向けに、デザインのレビュー時にこれだけは抑えておきたいというFigmaの設定の流れや機能を紹介します。

続きを読む

懐かしのmarquee?テキストを自動スクロールさせる方法と実装例

最近のWebサイトギャラリー見てたら、懐かしい動きを目にする機会が増えてきました。テキストが右から左に自動スクロールするという、かつての「marquee」タグを彷彿させる動きです。今回はこの自動スクロールテキストに注目してみます。
続きを読む

モバイル幅で作成されたWebサイトの特徴と作例

モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。
続きを読む

ダークモードに対応していないWebサイトを無理やりダークモードにする拡張

こんにちは、ダークモード推奨派のManaです。以前からダークモードの布教活動を細々としておりますが、まだまだダークモードに対応していないWebサイトもたくさんあります。今回はダークモードに対応していないWebサイトを強制的にダークモードにしちゃう拡張を紹介します。

続きを読む

デザインカンプからのHTML/CSSコーディングの練習になる学習サイト

HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デザインカンプからのコーディングの練習をしていきましょう!
続きを読む