デモのリクエスト
概要へ

ブログ

デジタル・ラビン会議2023

デジタル・イノベーションの喧騒の中で、時代の最先端を走り続けるには、最新のツールやテクノロジーを使いこなすだけでなく、協力的で魅力的なコミュニティを育むことが重要です。今年9月、当社の開発者チームはDigital Labinカンファレンスに参加し、活気あふれる旅に出ました。

23年10月6日

デジタル・ラボのセノスコ・チーム

単に参加するだけでなく、学生メンバーはこのイベントに欠かせない存在となり、才能を披露し、私たちのチームについてもっと知りたいと熱望するすべての人を歓迎しました。このブログでは、この忘れられないカンファレンスのエキサイティングなハイライトと貴重な収穫を紐解き、学びと楽しみのダイナミックな融合、そして私たちを待ち受ける有望なチャンスに光を当てます。デジタルイノベーションの世界における成長と仲間意識の祭典であるDigital Labinカンファレンスでの冒険と発見を一緒に語りましょう。

フロントエンド:Locomotiveで1ページのデザインに命を吹き込む

マスタークラスは、Locomotiveによって綿密に作られ、Figmaと専用のウェブページで紹介されたデザインを深く掘り下げることから始まりました。デザインの複雑さを理解することは、望ましい1ページのレイアウトを効率的に実装するために非常に重要でした。開発者は、CSSのBEM(Block Element Modifier)手法を採用し、このプロジェクトの範囲に合わせて調整することで、構造化された組織的なアプローチを実現しました。

スムーズなスクロールを実現するために、LocomotiveチームはLocomotive-scrollという名前のスムーズスクロールライブラリを発表した。このライブラリは、ユーザーに優れたスクロール体験を提供するだけでなく、開発者にウェブページの要素をシームレスにアニメーション化するツールを提供しました。SWAG」のタイトルとモデル画像のアニメーションは、スクロール時に開始され、このライブラリの可能性を示しています。

SCSSとCSSを活用し、開発者は「SWAG」のタイトルとSVG画像にクリエイティブなアニメーション技術を採用した。画像のアニメーションには、CSSの「transform」と「transform-origin」プロパティを効果的に使用。SCSSのforループは、SVGの文字ごとのアニメーションを可能にし、魅力的で視覚的に訴える方法でデザインに命を吹き込みました。

ポスターセクションにスクロールベースのCSSアニメーションを組み込み、カスケード効果のある商品リストを導入。Locomotive-scrollのスクロールプログレス属性を活用し、アニメーションのトリガーを正確にコントロール。オフセットパラメータを定義したスクロール進行により、ユーザーのスクロールとアニメーションの同期が容易になり、ダイナミックで魅力的な商品リストが実現しました。

開発者たちは、アクセシビリティの重要性を強調し、すべてのユーザーに対してテキストの視認性と色のコントラストを確保する必要性を強調した。編集セクションでは、アクセシビリティを維持しながらデザインのバリエーションを効率的に処理する方法を紹介した。さらにこのクラスでは、アクセシブルで軽量なアコーディオン・コンポーネントを作成するためのネイティブHTML要素の使用を強調しました。

マスタークラスの締めくくりとして、開発者はグリッドレイアウトを使用してギャラリーを作成し、GSAP(GreenSock Animation Platform)を使用してスクロールアニメーション効果を適用しました。GSAPは洗練されたアニメーションを可能にし、望ましい視覚的インパクトを達成した。さらに、WebGLベースの帽子の3Dモデルが統合され、THREE.jsのような技術の多用途性が示されました。

Sanja Božić、フロントエンド開発者:

Locomotiveによるマスタークラスでは、効率的なコーディング構造、スムーズなスクロール、アニメーション技術、アクセシビリティへの配慮に重点を置き、魅力的な1ページのウェブサイトを作成するための貴重な洞察を提供しました。Locomotive-scroll、GSAP、THREE.jsなどのライブラリと構造化されたコーディング手法の組み合わせは、最新のフロントエンド開発のパワーと多様性を実証しました。

これらのテクニックをマスターし、プロジェクトに取り入れることで、ユーザーエクスペリエンスを向上させ、今日のダイナミックなデジタルランドスケープに共鳴する魅力的なワンページウェブサイトを作成することができます。ハッピーコーディング!

セノスコ、デジタル・ラビン・カンファレンス2023に参加

マスタークラススペキュラティヴ・デザイン - 未来社会の課題を解決する

才能あるUXテック・リード・デザイナーが進行役を務めたマスタークラスは素晴らしかった。スペキュラティヴ・デザインの領域を掘り下げた、実に没入的で啓発的な体験だった。さらに注目すべきは、セッション中にとった型破りなアプローチだった。ノートパソコンやデジタルツールに頼るのではなく、スクリーンから離れ、紙にペンを走らせながらディスカッションをするよう促されたのだ。学習とデザインに対するこのアナログなアプローチによって、私たちは異なる創造的な次元に触れ、より自由にアイデアを探求することができた。

アドナン・ホジッチ、ジュニア・ソフトウェア・エンジニア:

マスタークラスは、スペキュラティヴ・デザインの世界についての貴重な洞察を与えてくれただけでなく、私の想像力にも火をつけてくれた。主催者のデザインと革新に対する情熱の伝え方は伝染するものがあり、この分野での自分の仕事に対する新たな熱意を掻き立てられた。私は、デザイナーがどのようにさまざまなソースからインスピレーションを引き出し、未来の可能性を思い描くために創造力を発揮するのかについて、より深い理解を得ることができた。

さらに、会議自体も充実した経験だった。多様な人々とつながる機会があった。参加者仲間との会話は、私の心を新たな視点へと開き、業界内の仲間意識を残してくれた。

全体として、デジタル・ラビン・カンファレンスに参加し、「スペキュラティヴ・デザイン」マスタークラスに参加したことは、忘れがたい、変容に満ちた体験だった。私のプロとしての旅路において、継続的な学習と探求の重要性を再認識させられました。このような機会に参加できたことに深く感謝しています。

この会議で得た知識とインスピレーションを自分の仕事に生かし、自分のデザインにおける創造性の限界に挑戦し続けることを楽しみにしている。

最先端のウェブ開発テクニックと革新的なデザインコンセプトの融合は、まさに進化し続けるフロントエンド開発の展望を浮き彫りにしています。開発者として、このような経験を受け入れ、型にはまらない方法を受け入れることは、私たちのスキルセットを豊かにするだけでなく、卓越したデジタル体験を創造することへの情熱を燃やすことにもなります。常に進化し続けるこの業界には、常に創造性と新しい視点の余地があるという事実の証だ。このマスタークラスは、既成概念にとらわれず、新鮮でオープンな気持ちで仕事に取り組むことを思い出させてくれました。