見出し画像

『はじめてのサイト制作コミュニティ』プロジェクトの成果物まとめ

先週から開催していた『はじめてのサイト制作コミュニティ』が終了しました。8日間という短い期間でしたが、ご参加いただいたみなさま本当にありがとうございました!

今回は「架空の案件にチャレンジしてみよう!」ということで、同じサイトをメンバーそれぞれが企画して制作する、という試みでした。題材にしたのは「元横綱がはじめたお花屋さんのサイト」。

期間が短かったのでどうかな...と思っていたのですが、完成度の高いサイトばかりが出来上がりました。素晴らしいですね!

画像1

↑ 今回はロゴ画像とお店の情報だけで制作していただきました。

制作されたサイトは全部で18個。せっかくなのですべてのサイトをご紹介していきますね。

■ みんなの「osumou flowers」

今回はJavaScriptまでしっかり作り込んでいただいた方が多数...。是非、URLをクリックして、サイトの動きまで楽しんでいただければと思います!

スクリーンショット 2021-08-25 10.16.26

縦書きのメニューが美しい...。スクロールしていくといい感じのアニメーションが始まるのでぜひ見てみてください。まとまりのあるデザインで素晴らしいです。

・Osumou Flowers
https://yama-w36.github.io/

スクリーンショット 2021-08-25 10.21.43

「本当に初心者なので、とにかく作りきることを目標にがんばりました!」とのこと。画像のお花と背景色がいい感じにマッチしていますね。

・OsumouFlower
https://south-ocean-373.github.io/osumouflower.github.io/

スクリーンショット 2021-08-25 10.32.52

大きな写真をあしらったファーストビューがとてもきれいなサイトです。全体の雰囲気もシックでとてもおしゃれです。文章にもこだわりがあってとても良いですね。

・おすもうの花
https://shota-hb.github.io/shota-hb.github.io-osumouflowers/

スクリーンショット 2021-08-25 10.37.53

写真素材の選び方にセンスが感じられる、とても綺麗なサイトです。メニューもわかりやすく配置されていて、ユーザーにも優しいですね!カルーセルも実装してくれました。

・OsumouFlowers
https://usahitomi.github.io/osumouflower/

スクリーンショット 2021-08-25 10.40.30

シンプルな構成で見やすいサイトに仕上げていただきました。フォント選びや行間など、とてもうまくデザインされているなと感じました...!

・目黒区東山のお花屋さん osumou flowers
https://aoimito.github.io/osumouFlowers/

スクリーンショット 2021-08-25 10.43.15

サイトにアクセスするとロゴがぱっと表示される、という派手なギミックが素晴らしいサイトです。ぜひアクセスしてサイトの動きを確かめてみてください。

・osumou flowers
https://syu-kuri.github.io/dotinstall_FlowerShopProject/

スクリーンショット 2021-08-25 10.46.31

濃い青が大きくあしらわれていて、吸い込まれるような魅力のあるサイトです。ドットインストールのレッスンを参考にタブメニューの組み込みにもチャレンジしていただきました。

・osumou flowers
https://yokoyokohiyoko.github.io/flower/index.html

スクリーンショット 2021-08-25 10.56.10

「時間のやりくりにも苦労しました。」とのことでしたが、細部までしっかりと作り込まれている印象でした!ギャラリーページもいい感じですね。

・osumou flowers
https://tomatonft.github.io/osumouflowers/index.html

スクリーンショット 2021-08-25 10.58.56

「和・カッコいい」をテーマに制作いただいたとのこと。全体の高級感...、色使い、レイアウト...、独特の雰囲気のあるサイトでとても素敵です!

・目黒のお花屋さん「osumou flowers」
https://bonobono-kiwi.github.io/flower-shop/

スクリーンショット 2021-08-25 11.07.19

「何があるかはその日のお楽しみ」という文章が印象的です。シンプルなレイアウトと、印象的なライティングが組み合わさった作品かと思います。

・osumou flowers
https://aka00ri.github.io/flowershop/

スクリーンショット 2021-08-25 11.10.23

とても可愛い印象のサイトです。JavaScriptを使った動きのあるサイトで見ていて楽しい気持ちになりますね!

・目黒区のお花屋さん「osumou flowers」
https://zemaitis6053.github.io/osumou_flowers/index.html

スクリーンショット 2021-08-25 11.13.46

ロゴに合わせて背景を自作してくださったとのことです!優しい雰囲気がとても素敵ですね。

・Osumou-flowers
https://miyashiroasahi58.github.io/osumoflowers/

スクリーンショット 2021-08-25 11.16.52

イラストレーターで背景パターンを自作されたとのこと...。和のテイストにあっていてとても可愛らしいです!フォントにもこだわりが感じられますね。

・osumou flowers
https://rinrin86.github.io/osumou-flowers/

スクリーンショット 2021-08-25 11.19.15

「メインビジュアルにこだわりました」とのこと。ユーザーに優しい、操作に迷わないデザインが素晴らしいですね!お問い合わせフォームもばっちり作り込まれています。

・osumou flowers
https://nyaosu555.github.io/

スクリーンショット 2021-08-25 11.21.52

「レスポンシブウェブデザインの実装は初めてでした」とのことですが、きちんとメディアクエリーが使いこなせていて素晴らしいです!

・osumou flowers
https://ninniq.github.io/osumou_flowers/

スクリーンショット 2021-08-25 11.23.41

トップの背景にはCSSグラデーションを使われたようです。「細部まで丁寧にサイズ調整しました。」とのことで、どんなデバイスでも楽しめるサイトに仕上がっていますね。

・osumou flowers
https://s-a-m-e.github.io/OsumouFlowers0824/

スクリーンショット 2021-08-25 11.27.34

メニューごとに下層ページもしっかり作り込まれていますね。マウスホバー時にアニメーションも仕込まれていて、よく工夫されていると思います。

・osumou flowers
https://zombie-k2.github.io/osumou/index.html/

スクリーンショット 2021-08-25 11.29.52

幻想的な色味の写真と、すりガラストップバーを重ねるなど、繊細な印象で素敵なサイトです!モーダルウィンドウも作り込まれていて素晴らしいですね。

・osumou flowers
https://zuki1202.github.io/

---

お仕事や学業と両立して参加いただいた方がほとんどだったようです。8日間、とてもバタバタだったかと思いますが、楽しかったという声もたくさんいただきました。

ご参加いただいた皆さま、ありがとうございました!次回のコミュニティについても企画中なので、近いうちにまた告知したいと思います。お楽しみに!

この記事が気に入ったらサポートをしてみませんか?