木曜日, 9月 11, 2025
No menu items!
ホーム ブログ ページ 9054

【Web制作】1年目エンジニアの時に静的ページの作成で意識・実践していたこと #HTML – Qiita



【Web制作】1年目エンジニアの時に静的ページの作成で意識・実践していたこと #HTML - Qiita

はじめに

未経験での転職をし、約1年ほどWeb制作に携わる中で、個人的に静的ページを作成する上で気をつけていることや意識していること・これまでやってきたことをまとめました。

この記事は、あくまで個人的な意見です。

1. ページの構造設計を徹底する

設計思想の重要性

以下の理由からページの構成をちゃんと考えられるようにするという練習を最初のうちはしていました。

  • 余分なスタイルの排除につながる
  • 保守性・拡張性の向上
  • コードの可読性向上
  • 後からの修正が容易になる

例えば、「この要素は何のためにあるのか」「このグループはどういう関係性を持っているのか」を明確に理解しておくことで、無駄なスタイルを当てることなく効率的なコーディングができると思っています。

図に起こして考える練習

僕が今までやってきたWeb制作案件ではHTML、CSS(SCSS)がメインのものが多かったため、HTML構造についてや、CSS設計について考える練習をすることが多かったです。

Reactのようなコンポーネント化という概念はありませんでしたが、CSS設計さえうまくできていれば同じコードを書かずに済むので、作成するページのどこが共通化できそうか?とか、どこの要素をまとめればなるべく少ないコード量で実現できるかなどを頭で考えられるようになるまでは、図に起こして考える練習をしました。

具体的な図の作成方法としては:

  1. ページを大きなブロックに分割する(ヘッダー、メイン、サイドバー、フッターなど)
  2. 各ブロック内の要素を階層構造で整理する
  3. 共通要素や繰り返し要素を特定する
  4. 各要素に対して適切なHTMLタグを考える
  5. 必要なCSSクラスの構造を設計する
    ↓実際に使用していたものは削除してしまったのでイメージを以下に添付しています。

image.png

個人的には最初のうちはコードを書く前に上記のように構造を明確にすることで、実装段階での混乱や手戻りを大幅に減らすことができたと思っています。

2. 公式の情報などを理解し、忠実になる

CSS設計の基本原則
CSS設計にはいくつかの確立された手法があります:

  • BEM (Block, Element, Modifier)
  • FLOCSS (Foundation, Layout, Object) とか

上記の設計思想のように、すでに手法として確立しているものは、それなりの理由があるし実際やってみて使いやすいという面もあるので、不要な再開発はせず、ちゃんと設計思想を理解してそれを実践することが結局早く・綺麗にコーディングするという面でいいのかなと考えているため、それを意識しています。

3. AIを駆使した効率的な学習

便利なことに今の世の中には、ChatGPTやClaudeなどのいった優秀なAIが存在します。誰もがいうことかもしれませんが、これを活用しない手はないので、僕は実際に使ってコーディングや練習をすることが多いです。

練習をする時に、自分が実際に使っていたやり方は:

  1. とりあえず自分でコーディングしてみる
    自分の知識でベストと思われる方法でコードを書く

  2. AIにコードレビューを依頼する
    書いたコードをAIに投げて、「セマンティックなコーディングに変換してみて」や「適切なスタイル・無駄のないスタイルに変えてみて」などのプロンプトで改善案をもらう

    具体的なプロンプト例:

    ・「このHTMLコードをより適切なセマンティックタグを使用して改善してください。SEOとアクセシビリティの観点からアドバイスもください。」
    ・「このCSSコードをBEM設計に沿って最適化してください。無駄なスタイルがあれば指摘してください。」
    とか
    
  3. 改善案を分析する
    AIからの提案を見て、なぜこの部分にこのタグを使うのか、このスタイルを当てるのかを公式の情報を見ながら考える+理解する

  4. 理解して実践に活かす
    理解したことを次のコーディングに活かす

このプロセスを繰り返すことで、ただコードの書き方だけでなく、「なぜそのコードが適切なのか」という理解が深まり、より質の高いコーディングができるようになります。

まとめ:静的ページ制作で意識していること

静的ページ制作を正確に早く作るという点において、大事なのは作成するページの構造をちゃんと捉えていい設計をするということだと思ってます。

ページの構造を正確に理解し、設計した上でコーディングをすることで:

  • 無駄なスタイルを当てなくて済む
  • メンテナンス性が向上する
  • コードの可読性が向上する
  • 後からの修正や拡張が容易になる

また、セマンティックなHTMLとCSS設計の基本原則を理解し実践することで、より良いWebページを効率的に作成することができると思っています。

僕個人的には、結局『量』をこなすことが一番の上達への方法だと思ってます。
その上で、それぞれに合う方法もあると思うので、どうやったら早くいいコードが書けるのかを考えながらやるのがいいと思ってます。
(この辺りは、良書と呼ばれている本を読んで参考して取り入れるというのもやってます。)

以上、読んでいただきありがとうございました🙌🏼

参考にしていた書籍





Source link

Views: 0

映画『近畿地方のある場所について』主演キャストが発表。オカルトライター役・菅野美穂と雑誌編集者役・赤楚衛二が、近畿地方の“ある場所”にまつわる謎を追う。予告映像とティザービジュアルが解禁




行方不明の友人が調査していた未解決事件や怪現象を調べるうちに、二人は近畿地方の“ある場所”へと導かれていく。背筋氏による同名小説を原作としたホラー作品



Source link

Views: 1

美少女ゲーム販売大手「FANZA」購入済みタイトル遊べなくなるときは「原則告知」。規約追加で不安の声上がるも、直近の心配はなし




FANZA GAMES運営からのコメントをいただきました。



Source link

Views: 0

ミキ昴生13kg減 亜生が方法明かす



ミキ昴生13kg減 亜生が方法明かす

ミキ昴生13kg減 亜生が方法明かす



Source link

Views: 0

「刀剣乱舞×柏原美術館」刀剣男士・稲葉江とのコラボ決定!おっきいこんのすけが山口県に初上陸


「刀剣乱舞×柏原美術館」コラボ詳細

「刀剣乱舞×柏原美術館」コラボ詳細

本コラボでは、刀剣男士・稲葉江の等身大パネルやコラボグッズが登場。

 

さらに、4月29日(月)には宣伝隊長「おっきい こんのすけ」が山口県に初上陸します!

 

 

コラボレーション内容

1. 「刀剣男士 稲葉江」等身大パネル設置

館内に刀剣男士「稲葉江」の等身大パネルが登場!緑と黒のスタイリッシュな衣装に身を包んだ姿を実際に見ることができます。写真撮影もOKなので、思い出に残る一枚をパシャリ♪

 

 

2. 刀剣男士コラボグッズ販売

「刀剣乱舞×柏原美術館」コラボグッズ

引用:「柏原美術館」公式サイト

 

館内受付にて「A4クリアファイル【稲葉江】」(1種)が販売されます!

 

価格:650円(税込)

 

 

3. おっきいこんのすけ来館イベント

「刀剣乱舞×柏原美術館」宣伝隊長「おっきい こんのすけ」

引用:「柏原美術館」公式サイト

 

『刀剣乱舞ONLINE』宣伝隊長「おっきいこんのすけ」が山口県に初上陸!下記日時に美術館入口でお出迎えし、こんのすけの名刺ステッカーを配布します。

 

【日時】

2024年4月29日(月)①11:00~ ②14:00~

 

【場所】

山口県岩国市 柏原美術館入口
※写真撮影OK

※参加費無料・事前申込不要

 

 

展示情報

企画展「新々刀名工 氷心子秀世 和楽器 江戸の音色」
国宝「名物稲葉江」が特別同時展示される貴重な機会!

会期:2024年4月20日(土)~5月26日(日)
開館時間:9:00~17:00
休館日:毎週火曜日
所在地:〒741-0081 山口県岩国市横山2丁目10-27
料金: 大人800円/高・大学生500円/小・中学生200円

 

そのほかの詳細は柏原美術館公式サイトをご確認ください。

 



Source link

Views: 0

「Share a Coke」リバイバル! コカ・コーラのデータドリブンなエモ消費戦略とは? | TABI LABO


かつて、自分の名前が印字されたコカ・コーラ ボトルが話題を呼んだのを覚えているだろうか。2014年にアメリカで始まった「Share a Coke」キャンペーン。SNSでの拡散を巻き起こし、多くの消費者の心を掴んだ、あの現象だ。

あれから10年。スマホネイティブと呼ばれるMZ世代が消費の中心を担う時代。あの頃とは消費行動も価値観も大きく変わった。が、コカ・コーラは、このキャンペーンを大胆にアップデートし、新たなアプローチで彼らに語りかける。単なるリバイバルではない。デジタル体験を融合させ、エモ消費を刺激する、その戦略に迫る。

名前入りボトル+α
QRコードで無限に広がる「自分らしさ」の世界

今回の「Share a Coke」キャンペーンでもっとも注目すべきは、パーソナライズ戦略の進化だ。名前入りボトルはそのままに、QRコードを活用したデジタル体験をプラス。動画を作成・共有できる「Memory Maker」というデジタルコンテンツを用意し、インタラクティブな要素を強化している。

QRコードを読み込むことで、デジタルハブへGO。そこでは、動画作成、共有、パーソナライゼーション体験ツアーなど、コンテンツが目白押し。従来の「モノ消費」から、体験や感情を重視する「コト消費」「エモ消費」へとシフトする消費者のニーズを捉え、ブランドとのエンゲージメントを深める仕掛けが随所に。

グループでエモ体験
Z世代の心を掴む「リアルなつながり」戦略

今回のキャンペーンで、コカ・コーラがターゲットとするのは、デジタルネイティブど真ん中のZ世代。SNSでの共感を求めるいっぽう、リアルな体験や人との繋がりを渇望している世代だ。

キャンペーンでは、デジタルとリアルの融合を意識し、現実世界でのつながりを促進するメッセージを打ち出している。仲間たちとコカ・コーラをシェアし、特別な瞬間を分かち合う。そんなリアルな体験を通じて、ブランドへの愛着を育むことを目指すわけだ。

マーケティング業界のオンラインプラットフォーム「Marketing Dive」が、コカ・コーラのグローバル・クリエイティブ担当副社長Islam ElDessouky氏のコメントを伝える。氏は、今回のキャンペーンについて「人びとがつながるときに生まれる純粋な魔法を祝福するもの」と表現。さらには「いいねやシェアだけでなく、リアルな瞬間を増幅させる」と、その意図を明かしている。

夢からエモへ
ブランド体験をアップデート

これまで、コカ・コーラは「夢」や「希望」といった抽象的な価値を訴求するブランド広告を展開してきた。しかし、今回の「Share a Coke」キャンペーンでは、より具体的なエモーショナルな体験価値を提供しようとしているのではないだろうか。

デジタルとリアルを融合させた体験を提供することで、ブランドの価値を再定義し、消費者のロイヤリティを向上させる狙いがそこにあるように思えてならない。単なる飲料ブランドから脱却し、消費者のライフスタイルに寄り添い、忘れられない瞬間を共有するブランドへと進化しようとしているようにも思えてくる。

グローバル戦略 × ローカル最適化
世界中で共感の輪を広げる

「Share a Coke」キャンペーンは、グローバル規模で展開されつつも、各地域の文化や消費者の嗜好に合わせたローカライズ戦略がカギとなる。これにより、グローバルブランドでありながら、地域に根ざしたブランド体験を提供し、より多くの消費者に共感を呼ぶことができるからだ。

たとえば、日本では、若者の間でバズっている言葉やニックネームをボトルに印字するなどのローカライズ戦略が考えられる。さらに、地域限定のイベントやキャンペーンを実施することで、消費者との距離を縮め、ブランドへの愛着を深めることも可能だろう。

データが語る真実
成功を裏付けるデータドリブン戦略

コカ・コーラが今回のキャンペーンを展開する裏側には、データドリブンなマーケティング戦略の進化がある。WPPからPublicis Groupeへのメディア・データビジネスの移行は、データ分析に基づき、マーケティング戦略を最適化し、より効果的なキャンペーンを展開するための布石だ。

コカ・コーラの親会社は、2024年第4四半期に14%の有機的収益成長を達成。また、過去3年間で、コカ・コーラの商標ブランドの小売売上が約400億ドル増加したとも。これらの事実は、コカ・コーラのマーケティング戦略が着実に成果を上げていることを示している。

エモ消費の未来形
パーソナライズされた体験の進化は止まらない

「Share a Coke」キャンペーンは、パーソナライズされた体験を提供することで、消費者のエンゲージメントを高めることに成功してきた。今回のリフレッシュでは、デジタル技術をフル活用することで、さらなるパーソナライズの可能性を追求している。

今後は、AIやARなどの最新テクノロジーを活用し、より没入感の高いエモい体験を提供することも視野に入れているのではないだろうか。たとえば、消費者が自分の好みに合わせたコカ・コーラのフレーバーをカスタマイズできるような……よりインタラクティブなデジタルコンテンツの提供などが考えられる。

いずれにしても、デジタルとリアルの融合、パーソナライズされた体験、そしてデータドリブンなアプローチは、これからの共感型マーケティングのあり方を指し示しているのかしれない。

Top image: © iStock.com / coldsnowstorm





Source link

Views: 0

白色クーラーを採用したGeForce RTX 5090カードや薄型のGeForce RTX 5070 TiカードがZOTACから発売に


001.jpg

 2025年4月8日,ZOTACは,新型グラフィックスカード「ZOTACGAMINGGeForceRTX5090SOLIDOCWhiteEdition」と,「GeForceRTX5070Ti」を搭載した「ZOTACGAMINGGeForceRTX5070TiSOLIDSFFOC」を4月11日に国内発売すると発表した。



Source link

Views: 0

【コスプレ】ステージ衣装“船長”のポージングがガチで決まりすぎ!全てが絵になる美女レイヤーの表現力【写真8枚】



【コスプレ】ステージ衣装“船長”のポージングがガチで決まりすぎ!全てが絵になる美女レイヤーの表現力【写真8枚】

【コスプレ】ステージ衣装“船長”のポージングがガチで決まりすぎ!全てが絵になる美女レイヤーの表現力【写真8枚】



Source link

Views: 0

立民 選択的夫婦別姓 法案の要綱まとめる 法案化作業急ぐ方針



立民 選択的夫婦別姓 法案の要綱まとめる 法案化作業急ぐ方針

選択的夫婦別姓の導入を目指す立憲民主党は夫婦が別の姓を選ぶ場合、子どもの姓は結婚する時に決めることなどを盛り込んだ法案の要綱をまとめました。今月中の国会提出を目指してほかの野党の意見も聞きながら法案化の作業を急ぐ方針です。



Source link

Views: 0

主力打者負傷相次ぐ SB緊急事態



主力打者負傷相次ぐ SB緊急事態

主力打者負傷相次ぐ SB緊急事態



Source link

Views: 0