こんにちはヒカルです。
現在デイトラで月に５万円稼ぐために勉強中です。プログラミングスクールのカモになるか実験中です。
前回までの記事でとりあえずクラウドソーシングに登録して、できそうな仕事に片っ端から応募してみました。
申し込んだ件数はクラウドワークスで7件、ランサーズで11件の案件に申し込みました。
当然のことながらほとんど不採用です。何も実績もスキルもないから当然ですね。ある意味当然なのでスキルの向上に努めようと思います。
クラウドソーシングでの仕事応募は続けていきます。できる仕事があれば応募は続けていきたいともいます。
仕事が取れれば報告するよ
クラウドソーシングで仕事を受注すること以外にできることは
デイトラのweb制作コースの中級を進めていく
ポートフォリオを充実させる
ことなのでここを進めていきます。
中級編の最初講座内容ではデザインツールであるFigmaデザインファイルの使い方を勉強します。
Figmaデザインファイルは、開発者がアイデアを実際の応答性の高いデザインに変換するための強力な共同作業環境です。このツールは細部や精密さが求められるデザインやアセットの作成・保守に特に有用です。
Figmaでは、1つのデザインファイル内で複数のページを作成することができ、各ページには専用のキャンバスが備わっています。これにより、プロジェクトを構造化し、異なるセクションや機能を分けて作業することが容易になります。開発者やデザイナーは同時にファイルにアクセスし、リアルタイムで変更を共有できるため、円滑なコラボレーションが可能です。
Figmaのデザインファイルはクラウドベースであり、オンラインでアクセスできるため、地理的な制約を超えてチームメンバーが協力できます。これにより、プロジェクトの進捗や最新のデザインに関する情報がリアルタイムで共有され、効率的な開発プロセスが実現されます。
- レイアウトの理解: Figmaでは、グリッドやガイドを使用してレイアウトを作成できます。デザインからHTML/CSSに移す際には、これらのレイアウト情報を正確に理解しましょう。要素の配置、パディング、マージン、フォントサイズなどに注意を払います。
- スタイルガイドの作成: Figmaデザインからコーディングに移る前に、スタイルガイドを作成しておくと便利です。色、フォント、ボタンのスタイル、アイコンなどの詳細な情報を含め、コーディングの一貫性を確保します。
- CSSフレームワークの利用: Figmaデザインから直接CSSを生成するプラグインもありますが、実際のプロジェクトではCSSフレームワーク（例: Bootstrap、Tailwind CSS）を使用することが一般的です。これにより、効率的で一貫性のあるコーディングが可能になります。
- モバイルファーストの設計: Figmaデザインがモバイルフレンドリーであることを確認し、コーディングもモバイルファーストの原則に基づいて行います。レスポンシブデザインに焦点を当て、画面サイズが変更された場合にも適切に表示されるようにします。
- 画像の最適化: Figmaデザインには高解像度の画像が含まれることがありますが、これらを適切に最適化してコーディングに組み込むことが重要です。ページの読み込み時間を短縮し、ユーザーエクスペリエンスを向上させます。
- コーディングのツールを活用: Figmaからコーディングに進む際には、サードパーティのツールやエクスポートプラグインを利用することも考慮してください。これにより、コーディングプロセスをスムーズに進めることができます。
- コミュニケーションの円滑化: 開発者やデザイナーとのコミュニケーションを大切にし、疑問や不明点があれば早めに解決するよう努めましょう。誤解が生じることを避け、期待する結果を得るために密な連携が必要です。
これらのヒントを考慮して、Figmaデザインからコーディングに取り組むと、より効率的で一貫性のある結果が得られるでしょう。
ウェブサイトやアプリケーションにアニメーションを追加する方法はいくつかあります。以下は、一般的なアニメーションの実装方法です。デイトラの中級コースでは実務でよく使われるアニメメーションを作って実装する方法を学びます。
１．CSSアニメーション: CSSアニメーションは、HTMLとCSSだけでシンプルなアニメーションを追加する方法です。以下は、要素に対する基本的なフェードインの例です。
.fade-in { opacity: 0; animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn { to { opacity: 1; }
}この例では、.fade-inというクラスがついた要素がページに表示されると、1秒かけて不透明度が0から1に変化します。
3.JavaScriptとCSSを組み合わせたアニメーション: JavaScriptを使ってCSSクラスの追加・削除を管理することで、動的なアニメーションを実現できます。例えば、クリックしたときに要素が表示・非表示するアニメーションは以下のように実装できます。
See the Pen Untitled by ヒカル (@lnlpnrjk-the-selector) on CodePen.
この例では、クリックすると要素が左にスライドアウトし、再度クリックすると元に戻ります。
最後はFigmaのデザインカンプから自分でコーディングを行い、サーバーにアップロードすることをゴールとしています。
レベル的にはこれくらいです。
これくらいのサイトが作れると思うとワクワクしますね。
