Language

  • 日本語
  • English
  • 简体中文
  • 繁體中文
  • 한국어

Translated by machine

投稿記事

f. Phantoms 2022年05月25日 22:52

サイト制作記録#1 - サイト制作を学び直す

これまでのあらすじ

サーバー移転を機にサイトデザイン刷新を決めた筆者。
しかし、ググってかき集めたサイト作りの知識はもう大分色褪せていた。
これまで〉のように、今度も手探りでやっていくのか?
いや、一から学び直そう!

この記事の概要

  • 目的:サイト制作の備忘録
  • 内容:読みやすかった記事や参考になった記事、覚えておきたいことなど
  • 対象:ぼく(または英語が読める人)
    ※英語を全く読みたくない人は〈こちら〉を読んでもいいし読まなくてもいいです。ご自由に。

1:言語設定を英語にする

基本的に英語で情報収集するため、下記の状態にします。

  • ブラウザの言語設定をPC版・スマートフォン版共に英語にする。
  • ツールの言語設定を英語にする。日本製ツールは日本語のままで良い。
  • サイトが日本語に訳されていた場合、英語のページに戻す。
  • 「日本語でいいじゃん」と言う他人を頭の中から追い出す。

ブラウザの言語設定

Firefox を別の言語に切り替える

ツールの言語設定

環境設定を確認。

Inkscapeの場合

環境設定→インターフェイス→言語からEnglishを選んで再起動。

Yeah!

Let's go back to tutorials. They sound easier now.

日本語でおk派の空想の他人を追い出す方法

頭の中に「なんで日本語にしないの」「日本語でいいじゃん」と言ってくる想像上の他人がいて、学習や作業の妨げになる場合、下記のようなことを考えると割となんとかできます。

  • 英語の方がストレス少なく調べものや作業ができるんだよね
  • 英文多読できるし、英語表現の勉強になる、一石二鳥だよ
  • Phew! There he goes again. Let him say what he want. Don't worry, never mind. Let's get back.

2:WEBについて知る

まずWEBの歴史と仕組みを軽く頭に入れます。

歴史

What is the world wide web?

ワールド・ワイド・ウェブとはどんなものか、またその歴史について、簡潔にまとめられている。

The birth of the Web

世界初のウェブサイトに関するCERN公式の記事。
The first website:世界初のウェブサイト。

Evolution of HTTP

ウェブページの歴史に関するより専門的な内容の記事。

Find out where responsive design came from

WEBデザインの変遷。とてもわかりやすい。

A brief history of CSS until 2016

W3Cの読みもの。暇なとき向け。

JavaScript history

インターネットの歴史を踏まえた、JavaScriptの歴史に関する読みもの。他の内容を補完できる。

JavaScript History

JavaScriptの年表。

JavaScript history & Why it matters

JavaScript関連の歴史をまとめたブログ記事。タイムライン図がわかりやすい。

仕組み

How does the Internet work?

インターネットとはどんなものか、図で説明されていてわかりやすい。

How the web works

ウェブページが表示されるときどんなことが起こっているのか、用語の意味と共に簡単にまとめられている。

How Browsers Work: Behind the scenes of modern web browsers

ウェブページの表示に関する、より専門的な記事。MDN曰く一読すべきとのこと。

3:チュートリアルを進める

\ サイト制作が無料で学べる! /

全般

Getting started with the web

サイト制作の概観。"Mozilla is cool."

Developer guides

HTML、CSS、JavaScript、Media、APIs、Performance、Mobile web development、Fonts、User interface developmentに関するリンクの一覧。

Tutorials

HTML、CSS、JavaScriptに関するチュートリアルの一覧。

Front-end web developer

サイト制作をより詳しく学ぶ記事の一覧。

HTML

HTML for Beginners – Includes Tags for HTML5

シンプルなWebページ作成のチュートリアル。「HTMLとは?」の最もわかりやすい説明がされていた記事。

Getting started with HTML

もっと実践的なウェブページ作成の方法。「ご飯が熱い」

CSS

Lean CSS

CSSでできることがまとめられている。確認問題付き。Podcastもあるから聴いて復習しよう。

Learn Responsive Design

レスポンシブデザインについて学ぶシリーズ。確認問題付き。非常に参考になる。

JavaScript

Learn Javascript

ざっくり。かなり見やすい。

What is JavaScript?

ぎっしり。JavaScript入門。

Learn Programming

JavaScriptの実践練習ができるサイト。丁寧だし綺麗で楽しげ。

HTTP

HTTP

HTTPに関するMDNの記事の一覧。

SEO

Search Engine Optimization (SEO) Starter Guide

サイトの玄関や通路を整備するのに必要なことはGoogle検索セントラルが教えてくれる。

書き方

Writing style guide

適切な表記や構文で書くためのヒント。英文向け。

『リーダブルコード』

邦訳版を読んだが、英語版もよさそうだった。

Markup Validation Service

HTMLがうまいこと書けているか検証してくれるツール。

CSS Validation Service

CSSがうまいこと書けているか検証してくれるツール。

あとがき

わあ。結構読みましたね。
忘れた部分や細かいことは上記のサイト内を検索したりリンク先を辿ったりすると良いでしょう。特に MDN Web Docs と Google検索セントラル内をよく探すのが、ぼくには合っています。

また覚えておきたいページリンクや書き忘れていたサイトがあったら追記します。

次回

お見せできる画面ができてきた頃に更新できたらいいな。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

\いいね・ツイートで記事ランキングアップ!/
ツイート

f. Phantoms 2022年05月06日 07:30

事務所のリフォーム

これまでのあらすじ

レンタルサーバー『ウェブクロウ』サービス終了のお知らせ。それが、全ての転機だった。

『ウェブクロウ』を利用していた筆者の個人サイトはサーバー移転を機にサイトデザイン刷新をすることが決まった。新たなサイトの構想を練るうちに、多方面でも次々と変更点が見えてきて——。

事務所のリフォーム

筆者の人生は「つくること」とともにあった。
その営みは、生物の細胞が旧いものから新しいものに置き換わるように、連続性を保ちながらゆっくりと変更を続けてきた。

だが、その過去に満足しているか?
君はこれから、どこへ進みたい?
大事なのは何だ?

自分にとっての創作活動を問い直し、再構築するときがきた。

生まれ変わるように、プロジェクトを一から建て直す。そして新しいサイトをリリースする。
この改革を筆者は、f. Phantoms の事務所のリフォームと呼ぶ。

具体的な変更点

新サイトURL

https://fphantoms.com/
海外向けのページも作るため「.jp」ドメインではなく「.com」を選択。

プロジェクト名

「f. Phantoms」はひとつの世界観から明田ミオのソロプロジェクト名に。
サークル名であり、サイト名でもある。社名のような存在。
そのうち開業届を出して本物の屋号にしようとしている。

ペンネーム

Adeli Mioから明田ミオへ。

Twitterアカウント

  • f. Phantoms
  • 明田ミオ
    プロジェクト公式アカウントと作者アカウントを分離。前者は発信専用とし、後者は交流用に使い分ける。

プロジェクトの世界観

  • f. Phantoms Universe:フィクションの世界全て。
  • f. Phantoms Agency:制作事務所、及び、キャラクターの居場所。プロデューサーの明田ミオとキャラクターが共に創作活動をしている世界。クロスオーバーワールド。第4の壁を越えることもできる。
  • f. Phantoms Memoir:キャラクターにとって事実の物語。シリーズごと独立の世界を有する。
  • f. Phantoms Drama:Agencyで制作された新たな物語。キャラクターにとって架空の物語。シリーズごと独立の舞台を有する。

キャラクターの年齢設定

Memoirの時間軸とAgencyの時間軸は異なるため、クロスオーバーワールドにおける年齢は「相川春馬」を基準に相対的に決定される……かもしれないし、そうとは限らないかもしれない。

作業環境

約8年活躍した(制作には向かない性能の)ノートPCは引退。
MacBook Air と24インチモニターを繋げてデュアルディスプレイに。

絵柄・作風

ペンネームも作業環境も変えたことだし、もっと自分の求めるかたちにしていきたい。

各シリーズ構成

作品ひとつひとつ、公開済のものも草案の状態のものも、まとめて見直している。

キャラクターデザイン

  • ユニット結成:楽在人和、ピカトゥラ・ロシエ、他
  • Agencyの共通衣装
  • バックグラウンドストーリーの掘り下げなど

ロゴデザイン

Inkscapeで作り直し、または新規作成。

生活との両立

メンタルケア・ヘルスケアを重視。創作活動を継続できるようにしていく。

その他

利用規約、各配信サービスの運用方針などの見直し。

あとがき

プロジェクト全体のトータルコーディネートだと思って取り組んでいます。モヤモヤしていたものを解消して自分の思い描く姿に変えていく過程、楽しいです。

まだやることはたくさんありますが、新作と共に新サイト公開したいと思っていますので、応援よろしくお願いします。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

\いいね・ツイートで記事ランキングアップ!/
ツイート

f. Phantoms 2022年03月20日 22:55

英語が苦手な方へ

(最終更新:2022/05/25)

英語が苦手な読者さんへ

当方のCi-en記事、特に制作記録や備忘録としての記事では、自分にとって参考になるコンテンツや文章を紹介する上で、日本語以外の言語が登場する場合があります。

該当する記事の閲覧により気分を害されましても、当方では一切責任を負いかねます。

予めご了承ください。

この記事について

こんにちは。日本生まれ日本育ち、母語は日本語の明田ミオです。
今後制作記録や備忘録としての記事を書くにあたり、かなり英語のサイトや英文の引用が挟まりそうな予感がしたので、この件だけ別で記事にしました。

英語を使う理由

ひとことでいうと、言語だからです。
使いたいときに使います。

英語のコンテンツを読む理由

自分にとって合っているものを選んでいます。
どう作るのか、ツールをどう使うのかといった、制作のための学習や調べものをする中で、英語の文書を参考にすることはよくあります。
英語で書かれたサイトや書籍が自分にとって理解しやすかったり、日本語版より英語版のほうが自分にとって読みやすいこともあります。

英語のコンテンツを引用する理由

ここでの記事は自分向けの備忘録としての役割もあります。
自分に合っている、自分にとって参考になった、後から見返したいものは、言語に関わらず記事に載せることがあります。

気になること

これまでの人生、英語が苦手な方と接する機会は多くありましたので、これに関するぼくの意見を述べます。

英語を嫌うことについて

きっと英語を使う上で何か嫌な経験をしたことがあるのだろうと感じています。
英語がわからなかったり苦手だったりすること自体はダメなことではありません。無理に好きになろうとしなくていいとぼくは思います。
あなたの感覚はあなたのものです。

ただ、言語そのものやそれを使う人に対する差別的なニュアンスを含んで「嫌い」と言うのなら(そんなことはないと思いたいですが……)ぼくは反対するか、相手にしません。

もしも英語はわからないが日本語はわかる、と伝えたい場合は「英語無理!」というような表現ではなく「日本語ならわかる」ということをそのまま言うようにしませんか。そうすれば、もっといいコミュニケーションができるように思います。

優劣を比べるものではない

英語は言語です。人が日常的に使うものです。
どれくらい使えるかを他人と自分とで比べるものでもありませんし、どの言語が優れているか劣っているかと比べるものでもありません。

ぼくにとっては、日本語より英語が楽な時もあります。英語を使いたい時に使っているだけです。英語が好きです。これらは単なる主観です。
比較してどちらが凄いなどと言いたいわけではありません。

「英語が嫌い」と言われるのが嫌だった

ぼくは自分のいる場で「英語が嫌い」と言われるのがずっと嫌でした。

嫌だった理由はこうです:

  • 英語が好きだから。
  • 自分に向かって言われたように感じていたから。
  • 英語嫌いな人が多くて、孤独だったから。

かつて、他人の意見に対して自分は耐性がありませんでした。
幼少期から親しんできた英語は、自分のアイデンティティの一部でもあります。
それを否定されたり拒絶されたりするのは、辛く、悲しかった。嫌いだと聞く度に傷つけられ、そのような人相手に心を閉ざさないではいられなかった。
そして、英語嫌いな日本人はあまりに多く、疲れ果てました。

でも過去は過去。

今後もし「英語が嫌い」と聞いても「英語が嫌いな人なんだ」と思うだけ、「英語できない」と言われても「英語できない(と自己評価している)人なんだ」と思うだけ……というように、他人の意見を他人のものとして聞きます。
つまり、自分に向かって言われたわけではないのだと線引きするよう努めます。
そうすれば、悲しくなることも、傷つくこともきっと減るでしょう。
まだ残っている傷も、きっと癒えていくことでしょう。

何より、もっと英語を使えるようになりたいから、凹んだり気にしたりしていられないです。

おわりに

どんなコンテンツが自分に合っているのか、どんな方法が自分に合っているのか、それらは人それぞれです。
ぼくがCi-enで書くものはあくまで、ぼくに合っているコンテンツや、ぼくに合っている方法です。
他意はございませんので、ご留意ください。

https://twitter.com/aketamio/status/1509496228429824004?s=21&t=AO2Dvz64lBWRBT4zHZVWQA

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

\いいね・ツイートで記事ランキングアップ!/
ツイート

f. Phantoms 2022年03月12日 18:06

ティラノゲームフェス2021

こんにちは! 槙志(まきし)です。
2021年9月から2022年2月開催の
ティラノゲームフェス2021
に参加したぜ。

うちのサークルとしてはほぼ毎年参加してきたが、オレ自身は久々の参加で、貴重な経験だった。
運営さん、プレイヤーの皆さん、ありがとうございました!

どんなコンテスト?

ティラノゲームフェス(ティラノフェス、TGF)は2016年から開催されてきた、ノベルゲームコンテスト。ADV・ノベルゲーム開発ツールのティラノスクリプト、もしくはティラノビルダーで開発され、ノベルゲームコレクション(ノベコレ)に掲載された、新作ゲームが対象だ。

コンテストとして競うというより、みんなで作品を持ち寄って楽しんで輪が広がる、お祭り会場みたいな場所を目指しています。 (公式サイトより引用)

参加作品

https://twitter.com/aketamio/status/1469586682668552193

『アンダークティカ』シリーズ作品「故郷からの便り」
7月9日、左の絵の人の誕生日までに届く、故郷からの便りを収録。
4通の便りと家系図だけのシンプルな作品だ。

ここだけの話(?)
「オプション設定」のサンプルテキストで左の人のセリフが読める。

作品への反応

フェス期間中のコメント、拍手、応援、さらにはダイア玉ブーストまで、本当にありがとうございました!
オレたちとしては予想以上の反響で、正直嬉しかったぜ。

今作のコメント返信はオレが担当してるんだけど、いただいたコメントを読んでいくうちに、なんとなくオレの中でも捉え直した部分があった。不思議な感じだけどな。

特に、想像しながら読んでくれたってコメントが多かった。
そんな風に楽しんでもらえてよかったよ。

バーチャルフェス

バーチャルフェスはティラノゲームフェス2020から導入された企画。作品探しや参加者との交流が楽しめる、バーチャルの作品展示会場だ。

フェスの様子はアッシュちゃんによるこちらの動画をチェック!

前年度分も撮ってあるぜ。

ちなみにこの頭上の「三枚目のジョーカー」はオレの二つ名らしい。
「f. Phantoms」の二つ名システム、オレにもまだ謎なんだけどな。

https://twitter.com/aketamio/status/1498287757289943040?s=20

フェス最終日は多くの人が訪れて賑やかだった!

アップデート情報

2022年3月6日最新版Ver.2.11が公開され、UI周りが少し変わりました。
内容自体は変わってません。
未プレイの方は、最新版でどうぞ!


P.S. オレはTGF2016以来の参加でした

フォロワー以上限定無料

ミオによるあとがきです。

無料

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

\いいね・ツイートで記事ランキングアップ!/
ツイート

f. Phantoms 2022年02月20日 22:53

Adeli Mio はペンネームを 明田ミオ に変更しました

ペンネーム変更のおしらせ

下記の通り変更しました。
新しいペンネームをよろしくお願いします!

【旧】2013年4月7日から2022年2月18日まで:Adeli Mio(あでりみお)
【新】2022年2月19日から:明田ミオ(あけたみお)

これまでの名前について

  • Adeli Mio の名義で発表した作品の著作権は明田ミオにあり、活動の責任も明田ミオにあります。同一人物なので。

  • Adeli Mio の名義で発表した作品に関して、制作者名を挙げる際は Adeli Mio のままで問題ありません。

  • Adeli Mio の名義で発表したゲーム作品のアップデートを今後リリースする場合、制作者名は新旧両方のペンネームを併記して対応します。

これからの名前について

  • ローマ字表記する際、明田を姓・ミオを名と見做し慣習にならって Mio Aketa としても問題ありません。自分は Aketa Mio と書きますが…!

  • ミオ(ミオさん)と呼んでくれていた方には特に影響ありません。Adeli(Adeliさん)と呼んでくれていた方は、よければ新しい方をよろしくお願いします。「あけたん」とかでもいいよ…!



以下、興味ある方だけどうぞ。

変更理由

新サイト準備にあわせて創作活動の全般的な整理をする中で、もっと根底から見直すことにしたから。仕切り直し、気分転換、そんなところです。

名前の由来

今回も特にありません。
ぼくはぼくのためにまっさらなキャンバスを用意しました。

フォロワー以上限定無料

明田ミオを選んだ経緯

無料

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

\いいね・ツイートで記事ランキングアップ!/
ツイート
« 1 2 3 4 5 6

最新の記事

月別アーカイブ

記事を検索