2021年のウェブサイトカテゴリー&ピックアップサイト課題 - ウェブデザインB課題 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

2021年のウェブサイトカテゴリー&ピックアップサイト課題

この記事の目次

ウェブサイトカテゴリー&ピックアップサイト課題(2021年提出分)

みなさんが提出してくれた課題をまとめています。(2021年提出分)
時間の関係上、全てを紹介することはできないですが、気になったものを強調しています。

カテゴリ:Webマガジン

みんなの発酵BLEND

一目見て何のサイトかわかりやすいと思いました。
発酵に対して詳しく書かれているので、わざわざ検索しなくてもこのサイトを見れば発酵のことがすべてわかりそうな気がします。
いろいろな写真が使われているので、見ていても飽きないし面白いです。

ニュー北九州シティ

イラストがおしゃれで可愛いのでいいと思いました。
動画がたくさん載っているので、どんなことをしているかが詳しく知れると思います。
北九州のことを調べてもあまり詳しく載っていないかもしれないけど、このサイトを見ればわかるのでとてもいいです。

オオサカマニア

まず、デザインが華やかだけど昔感のある絵がいいと思いました。操作してみとマウスの表示が変わっていて面白いと思いました。
左下にページ数も表示されていたのであとどのくらいあるのかが分かり飽きずに見ることが出来ると思いました。項目ごとのページでは、メインのページとは違い落ち着いたデザインだったので文章も読みやすかったです。

dancyu

写真の料理がとてもおいしそうだった。写真の配置がよく、興味を持ちやすかったです。マウスが上に行くと写真が拡大されるのでとても分かりやすかったです。
レシピでは、工程の見出しのようなものが大きく表示されていてとても分かりやすかったです。また、そのレシピの連載のページにもつながる表示があったため、他のレシピも見つけやすいと思いました。

ポmagazine

京都は観光に行きたいところ1番なので選びました。京都の観光をこのサイトだけでわかるのはありがたいなと思ったため。

最初はデザインがポップで可愛いけど見にくそうと思った。しかしそんなこともなく、見やすくて頭に入りやすいサイトだった。一番目に選出したサイトと違い、こっちのほうが印象には残りやすいかなと思う。
そして、Twitterもただのアイコンではなく、ポストの上に止まっている青い鳥のイラストをクリックするとTwitterのサイトに飛べるシステムや、「最近の噂」コーナーの写真にカーソルを持っていくと写真からイラストが浮き出てくるシステムは、最初すごく驚いて衝動的に全ての写真を見るきっかけになったので上手い方法だと思う。
遊び心のあるサイトでもあったので印象に残りやすく飽きない、楽しい!と思わせるデザインが参考にもなった。

TALKING ultrasuede®

色んなサイトを見たなかで、一番文章がシンプルで短く頭に入りやすく、見やすかった。無意識に最後まで見ていた。
文章と次の文章との間隔も広く、ゆとりがあって目も疲れないシンプルな、しかし写真などオシャレなデザインが気に入った。
個人的に好きなデザインがシンプルなものが好きなのかもしれないが、それでもこのサイトが一番見やすくて飽きないサイトだったから選出した。

カテゴリ:ギャラリー・ポートフォリオサイト

Ittetsu Matsuoka

トップページは「Work」と「About」の二項目しかなく至ってシンプルなつくりだが、一見乱雑に配置されているように感じる写真が、スクロールに合わせて不規則な動きをするので、スクロールが止められず、惹かれた。このサイトの場合、見せたいものが写真なので、その他をシンプルにすることで、より写真に目を向けることができるためよかった。

YOSHIHIKO UEDA

トップページの項目やポートフォリオのページの写真にカーソルを持っていくと音が鳴るようになっていて面白かった。その他にも、写真が自由に流れていくような画面であったり、カーソルをしばらく写真の上に置いておくと写真の撮影地ごとに分かれたページに飛べる工夫がされていたのに惹かれた。

Mireia Ruiz

マウスを動かしたら、動かした方へページが動いていくのがとても面白いなと思いました。また、自分の作品を並べてマウスで気になった作品を選んで見れるようになっているのも良いなと思いました。ロード中の砂時計のアイコンもとても良いと思いました。

kuribayashi Takumi Portfolio

まず最初に思ったのは、キーワードとなる文字を大きくしていて見やすいなと思いました。その文字を押すとそのことに関しての詳しい内容が出てくるのも良いなと思いました。また背景の雪の画像が動いているのも雰囲気があって良いと思いました。また、メールフォームが手紙の形になっていてクリックすると開いてメールを送れるようにしているのも面白いなと思いました。

dep MANEGEMENT(デップマネージメント)

デザインがシンプルで見やすいが、名前の部分が透明になっており、後ろ側で何かが流れていてこだわりを感じた。そして、名前部分にカーソルを合わせると、白黒反転して後ろ側でポートフォリオが流れ出す。この元はシンプルなデザインだけど、ある操作をすることによって派手なデザインに変化するのは、個人的に閲覧しやすいサイトだと感じた。
また、クリックするとサイト用のポインターに変化が起こるのは素敵だし、メニューにカーソルを合わせると地味に文字がチカチカしたりなど、細かい部分にもデザインが施されていて飽きることがなかった。
このようなデザインが良いと感じ、選出した。

Victoria Spicer

ページが表示された画面で真ん中より右にポインターを動かすとカーソルが右矢印に、真ん中より左にポインターを動かすとカーソルが左矢印に変化したことが斬新でこのサイトに興味を持った。クリックすると、矢印の方向に画像がスクロールするだけだったが、凄く面白いと感じた。
また、ページの下のほうにある英語の文章の中に小さい画像が驚いた。画像にカーソルを合わせると、少しだけ大きくなり、消えたり現れたりする仕組みだった。私は英語を読むことは苦手だけど、この文章の間にある画像を見ることで、何を書いているか少しだけ分かったような気がした。
このような今まで見たことないデザインのあるウェブページだったので、選出した。

tashi design

スクロールしていくと背景が見れるところが途中に出てきて背景の画像が変わっていたり、所々にあるイラストがアニメみたいに動いたりしていてわくわくしたから。

Jameen Tarlier Portfolio

項目にカーソルをあわせるとベージュのような色から黒色に変わって右側に2~3枚のそれぞれの項目ごとにおしゃれな画像がのっていて惹かれた。

カテゴリ:リクルート・採用サイト

丸千千代田水産株式会社 recruiting site

最初に閲覧したことを後悔するほど初見のインパクトがすごい。他のサイトを見ているときもこのサイトが忘れられなかった。スクロールアニメーションがあって見ていて楽しかった。
横スクロールで意外性があった。
「変化を楽しむ、商売を楽しむ」の通り社員さんのポーズやイラストに遊び心があって良いなと思った。

サマーインターシップ2023|新卒採用|オープンハウスグループ

ポップな感じで良かった。
サムネを見たときは、ごちゃごちゃしていて見にくいかと思ったけど、意外とそうでもなく、むしろ見やすかった。
使う色を3色に絞っていて統一感があった。
スクロールアニメーションがあってスクロールするのが楽しかった。
メリハリがあって良かった。

Chatwork Recruiting Site | 野心と確信。

スクロールするたびにたくさんのアニメーションを用いた文と画像が出てくるので、見ているだけでとても面白く、先を見たくなるなと感じたからです。
「Read more」というリンク先が各分野ごとに表示してあるので、気になると思った時にすぐにクリックして詳しく見ることができるという点もすごく良いと思いました。
また、一番上に出てくる「野心と確信。」という文字も、このサイトを開いた人が「これはどういう意味なのか」と気になって続きを見るきっかけにもつながるのではないかと感じました。

定期採用|フェリシモ採用情報|フェリシモ

一般的にはサイト中に写真を用いることが多いのに対して、このサイトは写真を用いず、イラストを用いているというところがとても面白く、私自身初めて見たので選出しました。
また、表紙がすごくシンプルなので、より何の会社なのかクリックして見たくなるのではないかなと感じました。
サイトをクリックした際に出てくる文字もサイトを開いた人が3行全部読めるように表示する長さを調整されているところもすごく良いなと感じました。
ピンクの丸が表紙の時点では何なのかわかりませんでしたが、サイトの中の人のイラストで丸が「人の心」を表しているということがわかるようになっていることも面白いなと思いました。

キャリア向けwebデレクター採用サイト

文字がそこまで多くなく見やすかったから。また四角でかくで格で囲ったりしてまとめられているので見やすかった。
シンプルすぎず派手過ぎず目を通しやすかったから。

株式会社LIFULL

トップに動画が流されており、スクロールしていくと背景が白、文字が黒、枠や重要な部分がオレンジになっておりシンプルで見やすかった。
また、閲覧者にとって見やすくなるよう工夫されていた。

東大病院産婦人科 研修医募集サイト

パット見て何についてなのか分かった。また、つらつらと文章が書かれておらず、閲覧者の目的ごとにリンクが分けられており、見やすいページだと感じた。

新卒採用サイト|静岡銀行

求人ように制作されたサイトのようです。銀行の堅いイメージを覆すようなポップなイラストに目を惹かれました。絵の具で塗られたようなカラフルな配色と多くないアクションがちょうど良いバランスだと感じました。他社と比べても一目で興味を持てるサイトだと思い選びました。

えがおグループ 新卒採用サイト

まとまった見やすいレイアウトだなと思いました。最初の読み込み画面が可愛らしかったのもポイントの一つです。動きなどは特にありませんが就活生が見たいところに辿り着ける分かりやすいサイトでした。フォントの違いや強弱が面白いと思いました。また最初に大きく出る笑顔の写真と背景のオレンジに活気を感じました。

D.A.Consortium RECRUIT SITE

マウスを動かすと背景の絵も一緒に動く、面白さがあった。最初は、メニューが英語表記だったので、わかりにくいなと感じたけどマウスを近づけると日本語表記に変わったのでそこがよかった。デザインもシンプルで見やすく、文字との統一感があってスラスラ読めた。

WOWOWリクルート2022 | 株式会社WOWOW

サイトを開いた瞬間、その会社ならではの言葉であったり、目指しているものが何なのか大きく書かれてあって印象に残った。
また、スクロールするとメニューごとに色分けされていたり、枠が振り分けられていて見やすいと感じた。

サマーインターンシップ2023|新卒採用|オープンハウスグループ

就活生と言うこともあり、「インターンシップ」という単語が目に飛び込んできたから。
サイトを開くと、赤や黄色を基調としていて、アグレッシブな印象を受け、インパクトがあったため。

採用情報|公文教育研究会

サイトを開くと、アニメーションで”スローガン””お知らせ”の順で表示され、動いて出てくるので目を引かれる=見てほしい順番で見てもらえるという方法を使っていて、注意を引かれたから。

リクナビ2023|インターンシップ・1day仕事体験情報・就活準備

就職活動でよくこのサイトをりようしていて見やすいし探しやすく誰もが愛用するサイトだとおもったから

マイナビ – 学生向け就職活動(就活)・就職情報サイト

リクナビと同じ選出理由で、個人的にはリクナビのほうがみやすくて好きだけどマイナビも就活の時に欠かせないサイトだとおもったから。

カテゴリ:サービスサイト

横田農場 おいしくて安全なお米の生産直売 茨城県龍ヶ崎市

サイトの名前通り開いたらお米のキャラクター出てきてわかりやすいです。そして選択が画像と共に横に横にスライドができそのスライドにはもっと見るなど詳細も知ることができます。

和歌山市にある小さな銭湯

このサイトのヘルプが常に左側にあります。そして大きく銭湯の画像が貼られその下に電話番号と営業時間が示されていました。開いたらすぐに自分が知りたいことが知れていいです。さらに最新情報のリンクもあるから常に最新の情報を知ることができます。

Oops

シンプルだけど、色遣いが面白かったから。また、病院っぽくない感じのサイトが気に入りました。

lili-chocone

トップページにあるお菓子が動かせるところに魅力を感じたから。また、私の好みの色を使っていてかわいいなと思ったから。写真のお菓子はフルーツだったりして色が鮮やか。イラストもあったりして女の子に人気のサイトになるのかなって思いました。

フルーツトマト専門農家|曽我農園の通販・オンラインショップ

1番売りたい商品をしっかりと主張しており、シンプルでとても分かりやすかったです。
たくさんの商品を売りたいからといって、煩雑にならべたり、情報量が多すぎてなにが売りたいのかがわからないということもなくトマトの魅力が簡単な説明でとても伝わり、ホームページもデザインがシンプルなのに綺麗でどのページに飛んでも初めての人にも簡単に使えるようにしていたのでとても良いと思いました。

スノーサンド(SNOWSAND)

初めにこのページを開くと売り出したい商品がぱっとでてきて、下にスクロールするとサービスしたいものの説明や情報や商品の特徴なども詳しくまとめてあるページもあり、価格や賞味期限なども書いてあって私たちが知りたい情報をここのページだけみればわかるという感じにしてくれているのでとても見ている側としてはありがたいなと思いました。
画像も見ただけで美味しそうなイメージを沸かしてくれ、シンプルな色使いで万人受けしそうなホームページだし、お問い合わせや細かいことまでしっかりと紹介しているのでとても魅力的なサイトだなと思いました。
あと最後にまたお会いしましょうと出てくるところが可愛らしかったです。

カテゴリ:ブランドサイト

美しさとは引き出すこと  HIK  公式サイト

化粧品が好きなため、このサイトを見つけて開いた時に、すごくシンプルな商品でも写真の撮り方によって使ってみたいと一瞬で思ったから。
ウェブサイトの写真も商品だけですごくシンプルなのに、影があることで商品がすごく魅力的に見え、その写真に惹かれたから。

GLAMPROOK 飯鋼高原|至れり尽くせりの贅沢なグランピング

最近グランピングをしているドラマをみて、そのグランピングシーンの景色に似ている写真ですごく綺麗だったから。
自然が好きで、今は色んなとこに巡ったりはできないけど、流れていくどの写真も魅力的で、行ってみたいと思える所やSNSで見たことのある写真ばかりだったから。

KATANism石川県小松市・能美市 産地のオンラインミュージアム

「クタニズムとは?」で日本語だけではなく英語も書いていて外国人にも読んでもらえるようにしているのがいいなとおもったから。
見ていてミュージアムっぽいウェブサイトだなと思い、またレイアウトが見やすく面白さもあっていいなと思ったからです。

西武ゆうえんち

今は令和だけど、昭和の古き良き街並みや熱気がとても楽しそうだから。画像も昭和っぽくまとまっているところもいいのかなと思いました。

南きりしま温泉

どんなところにあるのか惹かれたからです。動画が数パターンありすごいなと思いました。トップのページはシンプルにまとめられているのも良いと思いました。

カテゴリ:プロフィールサイト

End of the World | a new project by SEKAI NO OWARI

モノクロの雰囲気とアニメーションのかっこよさが好きだったので、選びました。 背景色をモノクロでまとめていることで、落ち着いて見え、かっこよさが出ていると思います。アニメーションを使っている部分と使っていない部分(情報系の部分)を分けていて、伝える部分と魅せる部分が分かれているので見た人が楽しみやすいと思いました。SNSのアカウントはスクロールしても付いてくるタイプで、一番下にサイトトップへ戻るボタンもあったので便利だと思いました。英語で書かれているため全世界の人が楽しめるのではないかな思いました。

Safari Riot : Noise | Award Winning Original Music & Interactive Audio Projects

ここまでのアニメーションに凝っているものがあるんだと思ったのと、色の使い方が好きだったので選びました。 背景が白で、文字が見やすく、青色がポイントだと思っていたけど、スクロールすると、文字に青色が入り、ポインタを合わせると、それぞれの文字で色や動画が流れる演出があってすごいと思いました。ポインタが青丸という部分も珍しいと思いました。トップページの文字をクリックすると、動画が流れて、ここでもポインタがListenととMuteになって、クリックすることで変化するのもすごいと思いました。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE