[第１回]共通のデザインカンプを複数人でコーディングしてみた
どうも、シナカフェです！
オンラインコミュニティ「クリエイターズ・シナジーカフェ」では、月に1度メンバーでコンテストを開催しています。2022年はTwitterのヘッダー画像、実際に運用するバナー広告、コーディングです。
今月は、記念すべき第１回のコーディングコンテストを開催しました！
コンセプト
「自分のソースコードは正しいかわからない」「他の人のソースコードを参考にしたい」そう思ったことはありませんか？そこで、シナカフェ運営が考えたのが今回の企画です。
共通のデザインカンプを使い、
複数人でコーディングしたら学びが多いのでは？
ソースコードはどのWebサイトでも簡単に見ることができますよね。しかし、同じデザインカンプ を複数人でコーディングし、ソースコードを見る機会なんて滅多に無いと思います。
このnoteが1人でも多くのコーダーさんの参考になることと、この企画の参加者さんに、このnoteからお仕事のご依頼が入ることがゴールです。
※ 相性が良さそうなコーダーさんがいてお仕事のご依頼をしたい場合は、直接ご本人にDMをお願いします。シナカフェにお仕事依頼をしたい方は、ぜひシナカフェにご参加ください。
今回のデザインカンプ
今回はXdで作成した、よく見るブログレイアウトです。すごく簡単そうに見えますが、WordPressで構築することを考慮しなければいけません。
▼ルール
・気軽に参加してほしいのでhoverされたデザインは無し
・WordPressで構築することを想定すること。
・Class名はお任せします！
・リンクはサムネイル〜ハッシュタグまでを、まるっと1つの<a>で囲ってください。タグやカテゴリ個別にリンクを設置する必要はございません。
▼ポイント
・リンクを何で囲うか？
・CMSで構築すると想定した場合、PC版の一番はじめの記事をどう作るか？
・リンク内のマークアップをどうするか？
デザインカンプ も無料で配布しています！DLはこちらから！
ぜひ挑戦してみてください👍
参加者のソースコード
▼じょう（@like_33_cat）さん
コメント
gridを使うことでflexを使うよりは、CSSをシンプルに書けたのかなと思います。複数行の3点リーダーの実装はやったことがなかったので、良い経験になりました。IE非対応です。WordPress自体をあまり触ったことがないので、CMSに組み込む上で致命的なミスなどあるかもしれないです。。。
▼yui（@web_yui_design）さん
コメント
・Wordpressで構築することを意識し、それぞれの記事のマークアップを統一したこと。
（１番目の記事にあえて特別なclassをつけず、擬似クラスで構築した。）
・必要最低限のclass数にしたこと。
入会から１年くらい経ちますが、初めてシナカフェのコンテストに参加します！普段、コーディングのお仕事をすることが多いのですが、コードレビューをしてもらう機会はあまりなく、自己流になってしまっているので、みなさんがどのように組んでいくのかとても気になります！
これからもコーディング課題の時は、参加したいです＾＾
▼ホリスケ（@horisukeblog）さん
コメント
個人的にGridの学習も兼ねて、Flexboxを使わずGridだけ使うマイルールでコーディングしてみました。その結果、CSSが複雑になったのであまり実用的ではなかったですが（汗）、その反面HTMLはシンプルに書けたのではないかと思います。
また、幅800px付近で、先頭記事のタイトルの改行が増えすぎてレイアウトが崩れないように自動で制限されるようにしてます。
なお、IEは考慮してません、笑。
▼あお＠コーダー（@coder_ao）さん
コメント
【クラス名について】
最近「FLOCSS」で構築しているので、今回も「FLOCSS」仕様です。
使い方があっているか少々不安です…。
【フォントに関して】
「ヒラギノ角ゴシック」が使用されていたので、Windowsでは代替フォントとして「NotoSans」が表示されるようにしています。
【はじめの記事について】
最新記事？にあたる最初の記事は、構造としては通常の記事を変わらないので、クラス名を付与して差分を調整する形で構築し、CMSで構築する際は「最初の記事にのみ「--new」を付与」することを想定しています。
最初の記事の雑コラは、遊び心ですので大目に見てください・・・（笑）
ちなみに人物の写真はこちらを利用しています。
https://unsplash.com/photos/-jIc0pEIQhA
画像加工の技術力がなくてすみません・・・^^;
よろしくお願いいたします。
▼おに（@onioni1109）さん
コメント
実務に携わったことはまだないですが、自分なりにコーディングしてみました！
flex-boxを使ったコーディングしかやったことがなかったので、今回はGrid Layoutを使用してコーディングしてみました。
よろしくお願いします！
▼アイバン（@ivan_aiban）さん
コメント
グリッドレイアウト中心。サイズの変更で合わせやすいように調整してみました。
SP版の記事の構図が全部同じ、PC版の方は最新記事の一番上だけ構図が違うから、WordPressで組み込む事を考えて、最新記事の一番上に擬似クラス(:first-of-type)を利用しました。
一番苦労したのはCodepenに触れたのは初めてなので、仕様が分からず、画像のurlを修正するところでした。
▼としき（@tototo_jinguuji）さん
コメント
カードの中身はアクセシビリティを考慮して、
①テキスト
②サムネ
の順番でマークアップ。
flexで配置を入れ替えました。
テキスト部分のタイトルやカテゴリーなどはorderで順番を変更しています。
サムネイル画像のアスペクト比はpadding-topで対応しました。
▼まさと（@jinen_syouten）さん
コメント
こだわり
・レスポンシブ画像のサイズとMIMEの最適化。
・グリッドを用いたレスポンシブ対応。
・FLOCSS/BEMを用いたCSS設計。
・記事タイトルのクランプ。
・デザインカンプの再現。
できなかったこと
・WordPressを想定したコーディング
▼Emi（@smem_risweb）さん
コメント
サムネイル画像の角丸加工をいちいちしなくていいように、CSSで角丸に。
「全ての記事を見る」もせっかくボタン型だったので、押した感が出るようにホバーを設定しました。カテゴリーの色は、WPでのカテゴリーIDに合わせて変化するよう設定しました。
▼ちひろ（@chihirohirozumi）さん
コメント
WordPressをまだほとんど学習できていないため、CMSで構築すると想定してのコーディングが難しかったのですが、なるべくHTMLの構造やclass名がシンプルになるように心掛けました。
また、記事タイトルがもっと長かったりタグがさらに増えたりしても、レイアウトが崩れないように配慮して実装を行いました。
▼金子（@K2De_sign）さん
コメント
いつもどおりのWP化前の静的コーディング。
これと言って特別なものはありませんが、以下説明になります。
今回はBlogだけですが、本来は別のコンテンツもあるため共通項はcss内のcommonで設定。
タイトルのBlog上部に出ている色は、カスタムフィールドで設定を想定しCSSではなくHTMLへ直書き。
WORKSやPRIVATEも複数登録をする場合を想定し、複数表示にも対応。
ハッシュタグも同じく複数登録への対応済み。
ハッシュタグは長い言葉を入れることを想定し、2行になった場合への対応もしています。
WORKSと日付の間の線は文字でした場合、閲覧端末環境で変動する恐れがあるためどの端末でみても変動しない方法として、疑似要素を設定しwidth 1px の要素を表示しています。
課題にあった、1番目の判定は疑似要素の:first-of-typeで判別しています。
記事など複数表示するものは基本的にループで取得するので、PHP側の記述を最低限の文言でできるようにCSSでの判別にしています。
▼もこもこ（@moco_mo5）さん
コメント
例えば表示させる記事数が増えた場合や、同じレイアウトで他の記事一覧を作ろうとした場合などに、使い勝手が少しでも良くなるように（崩れたりせず、流用しやすいように）…ということは意識してコーディングしています。まだまだ力不足なので、皆さんのコードをただ拝見するだけでなく、自分も実際応募してみることで、皆さんと比べて自分にどんな所が足りないのかなどを学ばせて頂きたく、応募させて頂きました。
▼あべり（@aberi_1986）さん
コメント
全体的にリキッドデザインを意識してコーディングしました。
CMSで構築とのことなので、アイキャッチがどのような大きさでもある程度整えられるような画像の取得方法を意識しました。
大きなカードと小さなカードはブロックを二つにわけ、CMS構築の場合大きなカードには「最新の一件」を小さなカードでは「最新の二件目から四件目」を取得する設定で想定しています。この辺りもっと効率的な記載方法があるのか他の人のコードが楽しみです。
共通項目をうまく分けきれず要素によってあっちこっちでの指定になってしまったのが反省です。
Next plan...
才能の無駄使いをする糞コード版も開催予定です！
シナカフェについて
クリエイターズ・シナジーカフェ（以下：シナカフェ）は、2020年9月10日にスタートし、現在約350人の方が参加しています。
シナカフェは、スクールのように決まった学習方法や教材を提供しません。また、オンラインサロンのように主催者が何かを提供することもありません。主役は参加者！使い方も決まっていません。
「じゃあ、どんなメリットがあるの...？」そう感じますよね。
シナカフェは例えるなら、月々1,100円（税込）で利用できる、ネット上のカフェ・コワーキングスペースに近い存在だと思います。困ったら誰かに気軽に質問できて、それをみんなで解決します。もちろん運営3人もそこに参加しています。
その質問は蓄積され、誰かの「困った」は近い状況の誰かの「困った」を解決する為のアーカイブにもなり、どんどんコミュニティは蓄積されます。
さらに、メンバーが自主的に主宰するイベントがあります。興味のある企画があれば自由にご参加いただけますし、そのほとんどはメンバーなら無料です。
▼毎月コミュニティの様子を紹介するnoteも発行しています
■シナカフェに向いている人
・能動的に動ける人
自分で質問したりイベントを企画できる人は活躍できます。
活躍することで目立ち、ファンが増えたり仕事が集まったりします。
・自分を隠さずさらけ出せる人
格好つけずに、自分の実力を共有できる人は学びが多いと思います。
逆に自分を大きく見せて格好つける人は微妙です。
・見ているだけの人
ROM専でもやりとりを見ているだけでも十分に学びがあります。
・スクールに通っている人
疑問があればセカンドオピニオンサービスのような感じで使えます。
・会社に勤めている人
自社以外の仕事術を知る、意見交換ができる。
・フリーランス
外注先や、仕事仲間を探せる。クラウドソーシングだと信頼できない人も多いので、信頼できる外注先や仲間を見つけませんか？
■参加しても活用しきれないかもしれない人
・何か特化した情報を求める人
プログラミングなど身に付けたいスキルがあり、特化した学びだけを得たい人。
・教えてもらって当たり前の人
SNSでもコミュニティでも人対人です。自分で調べてどうしても分からなかったこと、疑問に感じている人には手を差し伸べるでしょう。しかし、一から手取り足取り教えてもらおうと考えている方は厳しいと思います。
・大金を稼ぎたい人
コミュニティ内で仕事や求人の募集はありますが、大金が動くような案件はありません。また、楽して稼げる案件獲得を目的としたコミュニティではございません。
月額1,100円とは思えない内容
シナカフェは有料コミュニティなので、皆様の参加費で多くの有料サービスを導入しています。Google Workspace、Zoom、オンラインコワーキングスペースのoViceなどです。また、参加者が誰でも使える福利厚生も充実しているので、それだけでも上手く使う人は余裕で月1,100円ペイできます。
■過去のイベントやウェビナーアーカイブは見放題！
シナカフェは、月に１度ウェビナーやイベントを開催しています。過去に開催したウェビナーやイベントのアーカイブはほとんど残っているので、有料級の動画が見放題です！（画像は一部です）
■24時間自由にオンラインコワーキングスペースが使えます！
シナカフェはoViceを導入しています。oViceに入ればだいたい誰かいますwもちろん、集中したい人は集中できる部屋もありますし、トークする場所もあります。人の会話を聞きながら自分は作業をするなんてこともできるので、カフェのように使える空間です。
▼こんな感じで夜トークしたり（聞き専OK）
▼イベントはみんなでリアルタイムで視聴したりしています
ご参加方法
LPにて利用規約をご確認後、参加フォームからご参加ください。
■ 参加費用
月額1,100円（税込）
■ 参加申し込みサイト